Question 181976 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Testing a Node.JS server from my local React front-end

I’ve created a node.JS Express server whose role is to use an API to send JSON to my front-end. I finished the back end and put it on an AWS server. Now I want to work only on the React front end.
I start the react on localhost:3000 and make my requests to the AWS server, but I get a CORS error telling me that localhost:3000 is not authorized to send requests to this server.

Access to fetch at 'http://www.myawssever.fr:4000/api-url/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I’ve already tried multiple solutions to authorize localhost:3000 but I think the problem doesn’t come from there because for the server localhost:3000 is the address itself!
Do you know how I can test my back from my computer (React is on localhost:3000) by sending requests to the server (AWS)?

Tags:

2

Answers


  1. 0

    It seems like you’re missing CORS (Cross-Origin Resource Sharing) configuration on your Express backend server. This is probably the reason why your requests are not going through.

    Start by running npm i cors on your backend server.

    Then add the following to your main index.js file:

    var cors = require('cors')
...
app.use(
cors({
   /*domains that have the right to send/request data from this server*/ 
   origin: [
     'http://localhost:3000',
     'https://www.yourDeployedWebite.com',
   ],
 })
);

    More information can be found here.

    If this does not work, you might want to check your configuration in AWS or any typos in the allowed domain names, like not inserting a protocol (http/https).

    Login or Signup to reply.
  2. 0

    Here are the combined steps to resolve the CORS error and enable communication between your React front end and AWS server

    Configure CORS on your AWS Server

    First you need to configure the server to include the appropriate CORS headers in the response. You need to add the "Access-Control-Allow-Origin" header with the value "http://localhost:3000" to allow requests from your React app.

    Exact method for configuring CORS

    The exact method for configuring CORS depends on the server technology you’re using (e.g., Express, Apache, Nginx). For example, if you’re using Express, you can use the cors middleware. Here’s an example of how to configure CORS using Express:

    const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors({ origin: 'http://localhost:3000' }));

// Rest of your server code...

app.listen(4000, () => {
  console.log('Server running on port 4000');
});

    Restart your AWS server

    After configuring CORS, restart your AWS server to apply the changes.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search