Enabling CORS in Create React App utility

by

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

More Related Contents:

  1. Request header field Access-Control-Allow-Headers is not allowed by itself in preflight response
  2. Can't post data to Google Cloud Run
  3. Why doesn’t adding CORS headers to an OPTIONS route allow browsers to access my API?
  4. Trying to use fetch and pass in mode: no-cors
  5. No ‘Access-Control-Allow-Origin’ – Node / Apache Port Issue
  6. CORS Error: “requests are only supported for protocol schemes: http…” etc
  7. How to enable cors nodejs with express?
  8. How to enable cross-origin resource sharing (CORS) in the express.js framework on node.js
  9. Allow CORS REST request to a Express/Node.js application on Heroku
  10. Queries hang when using mongoose.createConnection() vs mongoose.connect()
  11. How to use passport with express and socket.io?
  12. deploying create-react-app to heroku with express backend returns invalid host header in browser
  13. Getting Spotify API access token from frontend JavaScript code
  14. Express routes parameters
  15. Does Axios support Set-Cookie? Is it possible to authenticate through Axios HTTP request?
  16. How do I detect whether I am on server on client in next.js?
  17. Service Worker registration error: Unsupported MIME type (‘text/html’)
  18. Create-React-App Proxy in Production Build
  19. Allowing frontend JavaScript POST requests to https://accounts.spotify.com/api/token endpoint
  20. Access to XMLHttpRequest at ‘…’ from origin ‘localhost:3000’ has been blocked by CORS policy
  21. Angular and Express routing
  22. Getting express server to accept CORS request
  23. Access to fetch at https://accounts.google.com/o/oauth2/v2/auth has been blocked by CORS
  24. CORS-enabled server not denying requests
  25. Firebase Hosting with dynamic cloud functions rewrites
  26. Response to preflight request doesn’t pass access control check
  27. How to properly reuse connection to Mongodb across NodeJs application and modules
  28. How to access a preexisting collection with Mongoose?
  29. CORS error on request to localhost dev server from remote site
  30. CSRF protection with CORS Origin header vs. CSRF token

Leave a Comment