3

I have created a React App with the create-react-app cli. Now I use an external library do some requests. (I pass the library my backendUrl and it does the request)

  • localhost:3000 My ReactJS App (Webpack)
  • localhost:8081 My Backend Server

Now this leads to an error, saying the Access-Control-Origin-Header was not sent.

SO I looked into how I can activate this with Webpack. What I have done:

  1. Eject Webpack Config to get access to the dev server properties with:

    npm run eject

  2. Add following part in the webpack.config.js

    devServer: {
headers: {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Headers":
    "Origin, X-Requested-With, Content-Type, Accept"
}

    } --> Did nothing

I then tried to use the proxy mechanism:

"proxy": {
  "/api": {
    "target": "<put ip address>",
    "changeOrigin" : true
  }
}

But since I use an external Library, which doesn't uses fetch and uses the whole URL to make API calls, this also doesn't work, since from my understanding this only proxies requests like fetch("api/items") for example.

I am a bit confused, since I can't find anything online. Maybe I put the things above in the wrong configuration file or line?

There is also a webpackDevServer.config.js but I can't find anything online about it and as soon as I add something to it, it will produce errors.

user5417542
  • 3,146
  • 6
  • 29
  • 50
  • Have you tried a proxy that looks like: "proxy": "http://127.0.0.1:8081" – stever Jan 23 '19 at 18:16
  • 1
    While in development, if you are using `create-react-app`, you do not need to eject to enable a development proxy. It's effectively built in and can be added as a single line to `package.json` without ejection based on the [docs](https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development). As the answer indicates, this will only resolve the issue in development and CORS needs to be enabled on the server for production. – Alexander Staroselsky Jan 23 '19 at 18:26
  • I created a new project and added it to the package.json. But the proxy gets ignored. As I said, maybe due to the missing fetch with a relative path. Is there something to say --> Proxy all http requests to "localhost:8081" to the proxy? – user5417542 Jan 23 '19 at 18:48
  • how we can add cors on react-rewired – Muhammad Numan Oct 24 '19 at 10:19

1 Answers1

1

CORS needs to be turned on server side, not client side. You can download chrome extensions to bypass CORS but that is for development purposes only.

The reason why you're getting CORS is because you're jumping from 3000 to 8181 which are two different origins. There are multiple different ways to enable CORS depending on what you're using on the backend.

In some cases this is in-fact just a development issues as at runtime, it's all running on the same origin. Most things will give you the ability to proxy calls into the place. For example, here is how .NET SPA Services / Angular 7 do it:

  • Angular running on :4200
  • .NET running on :5000

spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");

https://learn.microsoft.com/en-us/aspnet/core/client-side/spa-services?view=aspnetcore-2.2

I am not sure what you're using on the backend, so here is a general article if you're not using .NET

https://enable-cors.org/server.html

mwilson
  • 12,295
  • 7
  • 55
  • 95
  • Good answer. I was able to fix this in CRA using these instructions: https://create-react-app.dev/docs/proxying-api-requests-in-development/ Can you see any security reasons to disable CORS while working in development since a local react app could point to a real backend api? – Cathal Mac Donnacha Jul 07 '21 at 18:34
  • 1
    That's more of a question for whoever owns that server piece. In your scenario, I would argue that you should never be going against a production resource while working locally. Especially if they are non-GET operations (POST, PUT, DELETE, etc..). You should stand up a dev instance of your resource for this exact purpose so it can be tweaked for local development access. But, that may not be a concern at all depending on what your backend service is doing. – mwilson Jul 07 '21 at 21:38