Enabling CORS in Create React App utility

Question

I need to use CORS node module in React created using create-react-app utility.

Since its a utility I am not able to tweak inside and inject CORS into preconfigured EXPRESS module.

How can we achieve this?

Answer 1

If you are needing this for development and wanting to access an api from your react app but getting an error like this-

Failed to load http://localhost:8180/tables: 
The 'Access-Control-Allow-Origin' header has a value 'http://localhost:8180'
that is not equal to the supplied origin. Origin 'http://localhost:3000' is
therefore not allowed access. Have the server send the header with a valid
value, or, if an opaque response serves your needs, set the request's mode to
'no-cors' to fetch the resource with CORS disabled.

then you can get the create-react-app server to proxy your request to your api server quite easily.

create-react-app uses the webpack development server to serve your react app.

So if your react app is being served from http://localhost:3000 and the api you want to connect to is at http://localhost:8180/tables you can simply add a proxy value into your react app's package.json file like this-

proxy: "http://localhost:8180",

then from your react app call your api like

fetch('/tables').then(....)

the request will be sent to the create-react-app server which will send it on to the api server and return the results for you.

Full details here Proxying API Requests in Development

Answer 2

SIMPLER SOLUTION IS:

Because the server from create-react-app is only used during development, then you can use additional extensions on each browser to resolve the issue. Here are some extensions that you can use to solve CORS problems during development stage:

• Extension for Chrome
• Extension for Firefox
• Extension for Opera

There is Whitelist features that can use to activated the extension in only specified websites. So don't worry about the security.

Of course, at the production stage you can solve CORS problems on your respective server, so at this stage, the browser extension is no longer needed.

Answer 3

When cors issue is encountered in create-react-app all you need to do is set the proxy key in the package.json file. The proxy is pointed to the endpoint you want to interact with,note proxy doesn't work in production you have to explicitly set an endpoint to interact with.

For more checkout: https://create-react-app.dev/docs/proxying-api-requests-in-development

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react-dom": "^18.0.0",
    "react-query": "^3.39.2",
    "react-router": "^6.3.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.0",
    "uuid": "^8.3.2",
    "web-vitals": "^2.1.4"
  },
  "proxy": "http://127.0.0.1:8000",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 4

CORS: Cross-Origin Resource sharing, which means, we can't access resources on ABC.com from XYZ.com.

Solution: For the CORS issue fix needs to apply on the server not on the client side

ABC.com needs to allow XYZ.com to access resources.

Refer https://stackoverflow.com/a/58451189/6942012