0

I am trying to deploy a react application to the server.

When my deployed app tries to make calls to an api on the same server it receives the following error: 

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3045/login. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://xxx.xxx.x.xx:5000’).

The package.json file has the proxy specified:

  "proxy": "http://localhost:3045",

And here is my api call:

fetch('/login',
      {
        method: 'POST',
        credentials: 'include',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          password
        })
      })).json()

What confused me further, when I had the site being served from the remote server, accessed it from my own local machine, and had the backend being served on my local machine, the site was making calls to my own local port(successfully, once I noticed what was going on and changed the cors config origin to the remote server's ip to test), and accessed the api being served from my local machine, instead of on it's (the remote deployment server's) own local port.

My cors config on the remote server api: 

app.use(
  cors({
    origin: 'http://localhost:5000',
    credentials: true,
  }),

What changes do I need to make so that my site is making api calls to its own local ports, instead of the clients?

Quddus George
  • 962
  • 2
  • 14
  • 30
  • I also notice that when I edit the post request in the dev tools to the remote server's ip, instead of localhost, and resend it, the request reaches the api properly. However everything I am reading online indicates you can use localhost in your configuration (such as in the create-react-app package.json "proxy": "http://localhost:3045",). – Quddus George Mar 02 '20 at 21:24

2 Answers2

2

From memory (and running into a similar issue) proxying isn't mean to work when you deploy.

See Create-React-App Proxy in Production Build

J J M Wilz
  • 81
  • 3
  • so then I would post to the full Ip of the remote server, or just the port/route such as ':3045/login'? – Quddus George Mar 02 '20 at 21:42
  • 2
    It would be the full route, I *think* its been about 8 months since I had this issue, I ended up using the full route eg http://localhost:3045/login I had a create react app with a ngix server. I believe the server needed to also be configured to look for the request on localhost. – J J M Wilz Mar 02 '20 at 21:46
1

Try setting it up without any special cors module:

app.use(function (req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:5000');//If it doesn't work, change it to "*"
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,token');
    res.setHeader('Access-Control-Allow-Credentials', true);
    next();
});
i.brod
  • 3,993
  • 11
  • 38
  • 74
  • No luck, got: ```Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3045/login. (Reason: CORS request did not succeed).``` – Quddus George Mar 02 '20 at 21:31
  • Try res.setHeader('Access-Control-Allow-Origin', '*'); – i.brod Mar 02 '20 at 21:32
  • No luck, same error from the wildcard change. I think its something on the client side, though I dont have a clue what, because I got the same error when the api server was off. – Quddus George Mar 02 '20 at 21:33
  • Can you create some playground or repo? – i.brod Mar 02 '20 at 21:35
  • To be honest i'm not familiar with this "proxy" property in package.json. Can you try without it? – i.brod Mar 02 '20 at 21:36