node.js - OAuth 中的 CORS : Response to preflight request doesn't pass access control check

Question

因此，我正在尝试实现 OAuth 2 流程，而我的 web 应用程序是提供授权代码/访问 token 的服务器。

将代码发送回第三方网站时发生 Cors 错误(本例为 zapier):

XMLHttpRequest cannot load https://zapier.com/dashboard/auth/oauth/return/App505CLIAPI/?code=somecode&state=somestate. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://myurl' is therefore not allowed access.

如果我手动打开一个新选项卡，粘贴该 zapier uri，一切都会完美运行。

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

1. 添加Access-Control-Allow-Origin:我正在使用这个oauth2orize 库，并将响应发送到预检似乎也是 图书馆。所以我无法添加标题。
2. 使用 cors :已尝试 app.use(cors()) 和 app.options('*', cors()) 应该适用于所有路由，但根本不起作用。

我的 web 应用程序位于 Node Express 服务器上，前面有一个 nginx 代理服务器。

任何问题可能出在哪里的想法都值得赞赏。

Answer 1

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

具体来说，来自该 https://zapier.com/dashboard/auth/... URL 的响应不包含 Access-Control-Allow-Origin 响应 header ，因此您的浏览器不会让您的前端 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 代理的一些详细信息。