Question

我们正在尝试使用Passport.js在我们的应用程序中实现Github oAuth。如果用户通过单击锚标记/ href命中端点，它可以正常工作，但如果我们使用单击处理程序来启动ajax请求，我们会从Github服务器收到CORS错误。为什么呢？

服务器端代码：

app.get('/auth/github',
  passport.authenticate('github', { scope: [ 'user:email' ] }));

app.get('/auth/github/callback',
  passport.authenticate('github', { failureRedirect: '/login' }),
   function(req, res) {
    console.log('Github authentication successful!');
    res.redirect('/');
 });

客户端代码（我们正在使用React）：

- ＆GT;工作原理：

<a href='/auth/github'>Contact</a>;

- ＆GT;不起作用 - CORS错误：

handleContactAuth(event) {
  $.ajax({
    url: '/auth/github',
    method: 'GET',
    success: data => console.log( 'Contact Auth response: ', data),
    error: err => console.log( 'Error connecting to GitHub.', err)
  });
}

注意：这是React组件上的单击处理程序，并且正在运行，因为正在触发ajax请求。我知道我们目前没有处理响应，除了console.log。

- ＆GT;我们在使用AJAX方法而不是href：

时在客户端看到的错误

XMLHttpRequest cannot load https://github.com/login/oauth/authorize? response_type=code&redirect_uri=ht…auth%2Fgithub%2Fcallback&scope=user%3Aemail&client_id=our_client_code. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

有什么想法吗？非常感谢任何见解 - 非常感谢。

Answer 1

CORS错误不是服务器返回的错误，而是由浏览器触发的错误，如果响应不包含HTTP标头，表明允许跨源请求。您正在点击的端点显然不能像这样被访问。

Answer 2

我遇到了同样的问题，我发现至少在Google Chrome中，XMLHttpRequest对象仅限于同一来源政策。所以你可能需要坚持使用锚标签。

常规网页可以使用XMLHttpRequest对象从远程服务器发送和接收数据，但它们受同一原始策略的限制。扩展不是那么有限。扩展可以与其来源之外的远程服务器通信，只要它首先请求跨源权限。

链接：https://developer.chrome.com/extensions/xhr

单击href到我们的Github oAuth端点可以工作，但是对同一端点的AJAX请求会产生CORS错误吗？

2 个答案: