axios 无法解决凭证请求的CORS错误

yqyhoc1h 于 2023-08-04 发布在 iOS

关注(0)|答案(2)|浏览(280)

我在进行凭证请求（withCredentials: true）时一直面临CORS错误。我在express.js中有一个httpproxy设置，它路由到它后面的几个微服务（这些也是express.js应用程序）。下面是相关的代码，如果我需要提供更多的上下文，请告诉我。
来自http://localhost:3000/（React.js + axios）上运行的前端的请求：

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

字符串
错误代码：

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’)

型
以下是我为http-proxy-middleware应用的选项：

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

型
最初我为CORS origin选项{origin: "*"}设置了通配符，但后来从here中发现，认证请求不能为允许的origin头使用通配符。
在“polls”应用程序中启用CORS：

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

型
我已经敲了我的头4个小时了，现在（新的设置CORS），请帮助。

axios

来源：https://stackoverflow.com/questions/76722059/cant-resolve-cors-error-for-credentialed-request

2条答案

按热度按时间

djmepvbi1#

该问题可能与http-proxy-middleware配置有关，这可能导致CORS错误。您可以修改http-proxy-middleware配置，将相关的CORS头从目标传递到客户机。尝试添加这些选项，

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'
  },
}))

字符串
您还应该确保后端“polls”应用程序设置了适当的CORS配置

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

型
您可以使用trust proxy设置来启用“trust proxy”，以告诉Express.js在做出有关客户端IP、协议和安全连接的决策时信任某些标头。

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

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

// Rest of your app configuration and routes

型
希望这能解决问题。

赞(0）回复(0）举报 2023-08-04

crcmnpdw2#

更新：显然我在服务器上修复了cors问题（我将http://localhost:3000沿着http://127.0.0.1:3000添加到了允许的源代码中），但必须刷新浏览器，以便在后端进行cors编辑。

赞(0）回复(0）举报 2023-08-04