Tackling CORS Issues: My Backend Development Challenge and HNG Internship Journey

Introduction

Backend development is a journey filled with challenges and triumphs. Recently, while developing a recipe finder application, I encountered a significant roadblock: Cross-Origin Resource Sharing (CORS) issues. This blog post will explain how I overcame this problem and share my aspirations for the HNG Internship.

The Problem

My recipe finder app needed to fetch data from the Spoonacular API, but the browser blocked these requests due to CORS policy restrictions. This issue prevented the app from displaying essential recipe data, rendering it ineffective.

The Solution

To resolve the CORS issue, I implemented a proxy middleware in my React application. Here’s how I did it:

• Understanding CORS:
  CORS is a security feature that prevents unauthorized requests to different domains. Understanding this was crucial to finding a solution.

• Setting Up http-proxy-middleware: I installed http-proxy-middleware in my React
  

project:npm install http-proxy-middleware --save

I then created a setupProxy.js file in the src directory and configured the proxy:

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
        '/api',
        createProxyMiddleware({
            target: 'https://api.spoonacular.com',
            changeOrigin: true,
            pathRewrite: { '^/api': '' },
        })
    );
};

• Updating API Calls: I updated my API calls to use the proxy:

import axios from 'axios';

const BASE_URL = '/api/recipes/';

export const fetchRecipes = async (ingredients) => {
    try {
        const response = await axios.get(`${BASE_URL}findByIngredients`, {
            params: {
                ingredients,
                apiKey: 'your_spoonacular_api_key',
            },
        });
        return response.data;
    } catch (error) {
        console.error('Error fetching recipes:', error);
        return [];
    }
};

• Testing: After configuring the proxy and updating the API calls, I tested the application thoroughly. The CORS issue was resolved, and the app successfully fetched and displayed the recipe data.

My Journey with the HNG Internship

I am excited to start my journey with the HNG Internship. The program offers hands-on experience and mentorship in software development, aligning perfectly with my career goals. Through the internship, I aim to enhance my skills, build a robust portfolio, and connect with industry experts.The HNG Internship emphasizes real-world projects and practical experience, bridging the gap between theoretical knowledge and industry requirements. This structured environment will allow me to apply my knowledge, learn new technologies, and collaborate with like-minded individuals.

Why I Want to Do the HNG Internship

The HNG Internship provides an invaluable platform to develop technical skills and gain insights into the tech industry. The mentorship and feedback from experienced developers will be crucial in shaping my career. I am eager to tackle new challenges, contribute to meaningful projects, and grow as a developer.

Conclusion

Solving the CORS issue in my recipe finder application was a significant milestone in my backend development journey. It reinforced the importance of perseverance and problem-solving. As I continue this journey with the HNG Internship, I am motivated to tackle new challenges and make meaningful contributions to the tech community.For more information about the HNG Internship and the opportunities it offers, visit HNG Internship and HNG Hire.

Thank you for reading, and I look forward to sharing more of my experiences as I progress through the HNG Internship!