DEV Community

Ijeoma
Ijeoma

Posted on

1

SOLVING CORS ERROR

INTRODUCTION
As a Mass Communication graduate turned software developer, my coding journey has been filled with both challenges and rewards. This article will highlight the challenge I faced solving a server-side problem related to CORS (Cross-Origin Resource Sharing). I will briefly give the step-by-step approach I took to resolve this issue and ensure my application was running smoothly.

THE PROBLEM
The issue I encountered was a CORS error when trying to sign up users through my application. I used React TypeScript for my project. The client side of my application was hosted on Netlify, while the server side was hosted on Render. Despite configuring CORS on the server side of my application, I kept receiving errors. Here is a breakdown of how I resolved this issue.

  • Step 1: Identifying the CORS Error. When users attempted to sign up, the browser's console showed that the server was not properly handling CORS requests. It showed this error:
 Access to XMLHttpRequest at '' from origin '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Enter fullscreen mode Exit fullscreen mode
  • Step 2: Configuring CORS on the Server.
    I had to make sure the server was correctly configured to handle CORS requests. I configured the server to allow requests from my client’s URL on Netlify.

  • Step 3: Rebuilding and Redeploying the Server.
    After making changes to the server configuration, it was important to recompile the TypeScript files into JavaScript and redeploy the server.
    tsc

  • Step 4: Ensuring Proper Endpoints on the Client Side.
    On the client side, I updated the API endpoint to point to the correct URL. This was where the error was, I forgot to add "/api/" to my baseUrl.

  • Step 5: Verifying and Testing
    After deploying the changes, I tested the application to ensure that the CORS errors were resolved and that the signup and login worked as expected. This involved:

  • Testing the signup and login from the client application.

  • Ensuring that the server received and processed the requests correctly.

  • Checking the browser console and server logs for any other errors.

Conclusion
Solving the CORS and deployment issue was a significant learning experience. The error I encountered may not look like much, but it took me hours to figure it out, lol. This points out the importance of proper server configuration and thorough testing.
If you encounter similar issue, remember to:

  1. Check and configure your server for CORS.
  2. Ensure your client-side API calls the correct endpoints.
  3. Test your application after making changes.

HNG INTERNSHIP AND ME
I recently embarked on the HNG Internship, a very competitive program designed to bring out the best in software developers.
The internship offers an amazing opportunity to collaborate with experienced mentors and meet other smart interns.
Do check out the HNG Internship program, it is an incredible platform to start your career in tech! Use any of the links below:
(https://hng.tech/premium)
(https://hng.tech/internship)

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

DEV (this website) is a community where over one million developers have signed up to keep up with what's new in software.

Top comments (1)

Collapse
 
ankitjaininfo profile image
Ankit Jain

If you want to know if a particular API will work on site-A or not (before coding) you can test this online with this tool: cors-error.dev/cors-tester/
It gives actionable insights on "why" given API doesn't work. Helps fixing the issue at right place.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay