OAuth 中的 CORS：对预检请求的响应未通过访问控制检查

Posted 2023-02-27

【中文标题】OAuth 中的 CORS：对预检请求的响应未通过访问控制检查

【英文标题】：CORS in OAuth: Response to preflight request doesn't pass access control check

【发布时间】：2017-11-09 13:07:36

【问题描述】：

所以我正在尝试实现 OAuth 2 流程，而我的 webapp 是提供授权码/访问令牌的服务器。

将代码发送回第三方网站（本例中为zapier）时发生Cors错误：

XMLHttpRequest 无法加载 https://zapier.com/dashboard/auth/oauth/return/App505CLIAPI/?code=somecode&state=somestate。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'https://myurl' 因此不允许访问。

如果我手动打开一个新标签，粘贴该 zapier uri，一切正常。

似乎是典型的 CORS 问题，但流行的解决方案都不适合我：

添加Access-Control-Allow-Origin：我正在使用这个oauth2orize 图书馆，并且向预检发送响应似乎也是 图书馆。所以我不能添加标题。 使用cors：尝试了app.use(cors()) 和app.options('*', cors())，它们应该适用于所有路由，但根本不起作用。

我的 webapp 位于 node express 服务器上，前面有一个 nginx 代理服务器。

感谢您提出问题的任何想法。

【参考方案1】：

错误消息指示的问题不是由运行在https://myurl/ 的应用程序代码引起的。相反，只是 https://zapier.com/dashboard/auth/… 似乎不支持 CORS。

具体来说，来自 https://zapier.com/dashboard/auth/… URL 的响应不包含 Access-Control-Allow-Origin 响应标头，因此您的浏览器不会让您的前端 javascript 代码访问响应。

这似乎是 Zapier 故意的——他们不打算从浏览器中运行的前端 AJAX/XHR/Fetch 代码访问该身份验证端点。相反，我猜它的意图是您只能从后端代码访问该身份验证端点。什么的。

无论如何，您无法解决来自 Zapier API 端点的响应不包括 Access-Control-Allow-Origin 的事实。

只要它不包含Access-Control-Allow-Origin，您的浏览器就会阻止您的前端代码获得响应——而且只要您的前端代码正在尝试，就无法让您的浏览器以其他方式运行直接访问该 API 端点。

所以唯一的解决方案是不要直接从您的前端代码访问该 API 端点，而是设置一个代理并更改您的前端代码以通过它发出请求，或者只是在您的现有的后端代码，如上所述。

Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not? 的答案提供了一些有关如何设置特殊 CORS 代理的详细信息，如果您想走这条路。