OAuth中的CORS:对预检请求的响应没有通过访问控制检查

时间:2017-06-08 01:20:01

标签: node.js express oauth-2.0 cors preflight

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

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

  

XMLHttpRequest无法加载https://zapier.com/dashboard/auth/oauth/return/App505CLIAPI/?code=somecode&state=somestate。对预检请求的响应没有通过访问控制检查:否'访问控制 - 允许 - 来源'标头出现在请求的资源上。起源' https://myurl'因此不允许访问。

如果我手动打开一个新标签,粘贴zapier uri,一切都很完美。

似乎是典型的CORS问题,但没有一种流行的解决方案适合我:

  1. 添加Access-Control-Allow-Origin:我正在使用此oauth2orize 图书馆,并发送反馈到预检似乎也是一部分 图书馆。所以我无法添加标题。
  2. 使用cors:尝试app.use(cors())app.options('*', cors())应该适用于所有路线,但根本不起作用。
  3. 我的webapp位于节点快速服务器上,前面有一个nginx代理服务器。

    任何想法可能存在的问题都表示赞赏。

1 个答案:

答案 0 :(得分:1)

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

具体而言,该https://zapier.com/dashboard/auth/…网址的响应不包含Access-Control-Allow-Origin响应标头,因此您的浏览器不会让您的前端JavaScript代码访问该响应。

看起来这是Zapier的故意 - 他们不打算从浏览器中运行的前端AJAX / XHR / Fetch代码访问该auth端点。相反,我想你只想从后端代码访问该auth端点。或者其他什么。

无论如何,您无法确定Zapier API端点的响应不包含Access-Control-Allow-Origin这一事实。

只要它不包含Access-Control-Allow-Origin,您的浏览器就会继续阻止您的前端代码进入响应 - 并且只要您的前端无法让您的浏览器显示其他行为代码正试图直接命中该API端点。

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

"No 'Access-Control-Allow-Origin' header is present on the requested resource"的答案给出了一些有关如何设置特殊CORS代理的详细信息,如果你想走这条路。