当资源缺少 access-control-allow-origin 标头时传递 CORS [重复]

Posted

技术标签:

【中文标题】当资源缺少 access-control-allow-origin 标头时传递 CORS [重复]【英文标题】:Passing CORS when resource lacks access-control-allow-origin header [duplicate] 【发布时间】:2021-03-07 21:10:03 【问题描述】:

我已经构建了一个 react + express 应用程序,它在客户端和服务器端向外部 API(spotify API)发出请求。 我的服务器和客户端在不同的端口(8888 和 3000)上提供服务。 我的服务器端的请求工作正常并使用标准的app.use("*", cors()) 选项来处理 CORS,但我客户端的 axios 请求会产生 CORS 问题:

从源“http://localhost:3000”访问“externalURL”处的 XMLHttpRequest 已被 CORS 策略阻止:对预检请求的响应未通过访问控制检查:否“Access-Control-Allow-Origin”请求的资源上存在标头。

我的客户端请求包括 Auth 令牌和标头:

 headers: 
        'Authorization': 'Bearer ' + authToken,
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin": "*"
 

我尝试阅读一些类似的帖子和关于 CORS 的 MDN 文档,但未能解决问题。

【问题讨论】:

来自外部 Spotify API 端点的响应需要具有 Access-Control-Allow-Origin 标头 - 作为响应标头。但事实并非如此。您无法在前端 javascript 中进行任何更改,以将响应标头添加到来自外部端点的响应。外部端点的维护者需要添加响应头。 谢谢,我很喜欢在整个网站上阅读您关于该主题的帖子。我可以像一些人建议的那样使用代理服务器来解决这个问题吗?为什么当我在本地运行项目而不是在 heroku 上运行项目时这不是问题? 【参考方案1】:

尝试在你的服务器端包含这个

app.use((req, res, next) => 
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PATCH, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,Content-Type,auth-token, Authorization,');
    res.setHeader('Access-Control-Allow-Credentials', true);
    next();
);

【讨论】:

不幸的是,没有运气。我尝试使用和不使用 cors 模块。我想知道是否因为反应客户端位于不同的端口 3000 上,我的服务器上的这些 cors 选项不适用? 我认为它与端口无关。尝试发送带有和不带有标头的请求。 无论如何,该请求都需要身份验证令牌和内容类型标头 - 否则我认为 CORS 选项不会启动并造成此问题

以上是关于当资源缺少 access-control-allow-origin 标头时传递 CORS [重复]的主要内容,如果未能解决你的问题,请参考以下文章

Flutter Android Studio 中缺少设备文件资源管理器选项

自定义 Web 资源缺少功能区 CRM 2016 问题

macOS 的 vscode 资源管理器中缺少 git 装饰

laravel 5.2 身份验证 - 缺少链接

AWS Api 网关:缺少身份验证令牌

Rails 资源路由缺少参数但匹配文档