I'm trying to figure out where to add the "Access-Control-Allow-Origin" header to my create-react-app dev Server config.
So far I'm adding it to config/webpackDevServer.config.js
without much luck.
Any idea on where I could add it?
thanks!
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.
There are several ways we can overcome this issue: Make REST API calls from the same domain as xkcd. Edit the CORS settings of xkcd's server. Make REST API calls from our own backend server.
You can add CORS support to an API proxy by attaching an "Add CORS" policy to the API proxy when you create it. To add this policy, select the Add CORS headers checkbox in the Security page of the Build a Proxy wizard.
Here is a recipe based on @tlfu 's answer for those that are using react-app-rewired
. In this case you'll need to define a root level config-overrides.js
file containing the following:
module.exports = {
// Extend/override the dev server configuration used by CRA
// See: https://github.com/timarney/react-app-rewired#extended-configuration-options
devServer: function(configFunction) {
return function(proxy, allowedHost) {
// Create the default config by calling configFunction with the proxy/allowedHost parameters
// Default config: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpackDevServer.config.js
const config = configFunction(proxy, allowedHost);
// Set loose allow origin header to prevent CORS issues
config.headers = {'Access-Control-Allow-Origin': '*'}
return config;
};
},
};
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