create-react-app web server respond with CORS headers

Question

This is a unique situation, because I need to respond with CORS headers from a server, but the server is a create-react-app server running a react app.

I have 2 react applications, app1 (port 3002), app2 (port 3001) and 1 backend (port 3000). When I make a request from app1 to the backend (/api), it sends a 302 redirect to app2. This causes the browser to throw a CORS error because app2 doesn't respond to the preflight OPTIONS request with the access-control-allow-origin header. Is there a way to configure the CRA dev server to respond with this header? Or maybe these headers can be added via some proxy on app1?

Error

Access to XMLHttpRequest at 'http://localhost:3001/' (redirected from 'http://localhost:3002/api') from origin 'http://localhost:3002' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I've tried this on app1 with no luck:

src/setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:3000',
      changeOrigin: true,
      onProxyRes: response => {
        response.headers['access-control-allow-origin'] = 'http://localhost:3002';
      },
    })
  );
};

I'm guessing maybe I need to add some config to the server on app2 so it will respond to the preflight request, but I don't know how.

Update: I found the node_modules/react-scripts/config/webpackDevServer.config.js and added

headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
      "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
    },

This adds the headers to the CORS request, but not really a permanent solution. I imagine I have to use craco to do this?

What's the exact error you're seeing here? If your browser's been redirected to app2, that request doesn't go through app1's proxy. — jonrsharpe
– jonrsharpe, Commented Apr 20, 2021 at 15:15
Hey @jonrsharpe thanks for your response, I added the error above. "redirect from x to y has been blocked". — JBaczuk
– JBaczuk, Commented Apr 20, 2021 at 15:19
Should that really have been an XHR to begin with? Why would what appears to be a backend API request involve a redirect to a separate client app? — jonrsharpe
– jonrsharpe, Commented Apr 20, 2021 at 15:23
For example, Oauth2.0 responds to the auth code request with a redirect and the code is a query param. — JBaczuk
– JBaczuk, Commented Apr 20, 2021 at 15:39
In the web flow (see e.g. docs.github.com/en/developers/apps/…) you don't know or care how the provider's page is implemented - you send your user to e.g. github.com/login/oauth/authorize with some query parameters to identify your app etc., then some time later they appear back on your site with a code that your backend can then exchange for a token. — jonrsharpe
– jonrsharpe, Commented Apr 20, 2021 at 15:57

JBaczuk · Accepted Answer · 2021-04-21 17:11:26Z

5

To do this, you can use craco. In project root folder:

yarn add -D @craco/craco
touch craco.config.js

craco.config.js

module.exports = {
  devServer: {
    headers: {
      "Access-Control-Allow-Origin": "https://example.com",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
      "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization",
      "Access-Control-Allow-Credentials": "true"
    },
  }
};

Note: This only edits the dev server configuration. This allows redirects initiated by the server with cookies (allow-credentials).

edited Apr 21, 2021 at 17:11

answered Apr 21, 2021 at 16:53

JBaczuk

14.7k10 gold badges66 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Edy Bourne Over a year ago

Is this working for anyone? I did this, but no cors headers are added and I keep getting the cors issue. Not sure what's going on.

very big cat Over a year ago

Same here, didn't see it work.

Kutalia Over a year ago

@EdyBourne you just need to change react-scripts with craco in package.json scripts section. That way you will actually utilize the craco config

Collectives™ on Stack Overflow

create-react-app web server respond with CORS headers

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related