Question 212322 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Can't resolve CORS error for credentialed request

I keep facing the CORS error when making a credentialed request (withCredentials: true). I have an httpproxy setup in express.js that routes to a couple of microservices that sit behind it (these are express.js apps as well). Here’s the relevant code, let me know if I should provide any more context.

Request from frontend running on http://localhost:3000/ (React.js + axios):

const response = await axios.post(
        "http://127.0.0.1:3030/register/",
        requestData
      );

Error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:3080/polls?user=64749d4793bfab3dc9946246. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://127.0.0.1:3000’)

These are the options I apply for the http-proxy-middleware:

import { createProxyMiddleware } from "http-proxy-middleware";
app.use('/polls', createProxyMiddleware({
            target: "http://localhost:3050",
            changeOrigin: true
        }))

Initially I had a wildcard set for the CORS origin option {origin: "*"}, but later found out from here that credentialed requests cannot use wildcards for the allowed origin header.

Enabling CORS in the "polls" app:

app.use(cors({
    origin: 'http://127.0.0.1:3000',
}))

I’ve been banging my head over this for 4 hours now (new to setting up CORS), please help.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Update: Apparently I was fixing the cors issue on the server (I added http://localhost:3000 along with http://127.0.0.1:3000 to the allowed origins) correctly but had to refresh the browser for the cors edits in the backend to come into play.


  2. 0

    The issue might be related to the http-proxy-middleware configuration, which could be causing the CORS error.
    You can modify the http-proxy-middleware configuration to pass the relevant CORS headers from the target to the client. Try adding these options,

    app.use('/polls', createProxyMiddleware({
  target: "http://localhost:3050",
  changeOrigin: true,
  onProxyRes: (proxyRes, req, res) => {
    // Set the 'Access-Control-Allow-Origin' header to the requesting origin
    proxyRes.headers['Access-Control-Allow-Origin'] = 'the-origin-url-goes-here'
    // Set the 'Access-Control-Allow-Credentials' header to 'true'
    proxyRes.headers['Access-Control-Allow-Credentials'] = 'true'
  },
}))

    you should also ensure that your backend "polls" app sets the appropriate CORS configuration

     app.use(cors({
  origin: 'http://127.0.0.1:3000',
  credentials: true
 }))

    you can enable "trust proxy" using the trust proxy setting to tell Express.js to trust certain headers when making decisions about client IPs, protocol, and secure connections.

    const express = require('express')
const app = express()

// Enable "trust proxy" 
app.set('trust proxy', true)

// Rest of your app configuration and routes

    Hope this solve the issue.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search