Menu
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?
827
Head over to your App. import { useEffect, useState } from 'react'; import './App. css'; function App() { const makeAPICall = async () => { try { const response = await fetch('http://localhost:8080/', {mode:'cors'}); const data = await response. json(); console. log({ data }) } catch (e) { console.
Simple proxy server that runs on localhost:3001: use(cors(corsOptions)); const proxyMiddleware = createProxyMiddleware("/", { target: "https://....api origin.....com", changeOrigin: true, }); app. use(proxyMiddleware); app. listen(3001, () => { console. log("proxy is listening on port 3001"); });
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
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
