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

Question

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

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

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

如果我手动打开一个新选项卡，粘贴该 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

响应标头，因此您的浏览器不会让您的前端 JavaScript 代码访问该响应。

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

无论如何，您无法修复来自 Zapier API 端点的响应不包含

Access-Control-Allow-Origin

的事实。

只要它不包含

Access-Control-Allow-Origin

，您的浏览器就会阻止您的前端代码获取响应，并且只要您的前端代码试图命中，就无法让您的浏览器以其他方式运行直接使用该 API 端点。

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

答案在为什么我的 JavaScript 代码收到“请求的资源上不存在‘Access-Control-Allow-Origin’标头”错误，而 Postman 却没有？给出了一些关于如何设置特殊的详细信息CORS 代理，如果您想走那条路。

Answer 2

我在外部 API 提供商方面也遇到了类似的问题。该错误指出飞行前检查错误。但是，当我在浏览器开发工具中监控网络时，选项调用返回 200 状态。

“他们不打算从浏览器中运行的前端 AJAX/XHR/Fetch 代码访问该身份验证端点”，sideshowbarker 的这句话是正确的评估。我将代码移至我的 API，效果很好。