Question

我正在将Web应用程序部署到heroku，并在客户端使用以下cors配置。

 const instance = axios.default.create({
    baseURL: "https://myapp-backend.herokuapp.com",
    headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        "Access-Control-Allow-Origin": "https://myapp-backend.herokuapp.com"
    }
});

在服务器端

const corsConfig = {
   origin: ['https://myapp.herokuapp.com', 'http://localhost:3001']
}

app.use(cors(corsConfig));

但是我不断收到错误消息：“对预检请求的响应未通过访问控制检查：所请求的资源上没有'Access-Control-Allow-Origin'标头。”

任何帮助将不胜感激。有时配置有效，但有时却无效...

Answer 1

您的请求中的自定义标头（其中一些被误导了）已经触发了针对交叉来源请求的飞行前请求。这意味着浏览器将单独向您的服务器发送一个OPTIONS请求，以询问是否可以在发送实际请求之前处理此请求。

您有两种选择。首先，删除触发飞行前请求的自定义标头。 Content-Type或Access-Control-Allow-Origin都不适合您从浏览器发送的请求。 Content-Type属于响应，客户端无法指定允许的起源的任何内容-由服务器决定。

如果由于某种原因您无法阻止浏览器触发飞行前请求，那么您需要为服务器的飞行前请求显式添加支持。您可以了解如何使用cors模块来完成here。

对预检请求的响应未通过访问控制检查：请求的资源上不存在“ Access-Control-Allow-Origin”标头。 React.js

1 个答案: