Google oauth 400响应：请求的资源上没有“Access-Control-Allow-Origin”标头 [英] Google oauth 400 response: No 'Access-Control-Allow-Origin' header is present on the requested resource

问题描述

我试图从客户端javascript向google oauth端点发送请求（ https://accounts.google.com/o/oauth2/v2/auth ）与谷歌日历范围。事情是，我不能使用谷歌的JavaScript客户端，因为我实际上使用的是webpack，而且我不想单独在我的bundle.js之外包含JavaScript脚本。

因此，我使用的是axios（ https://github.com/mzabriskie/axios）将HTTP GET发送到上述的令牌端点。以下是我的请求的样子：

  https://accounts.google.com/o/oauth2/v2/auth?response_type = token& client_id = {client id here& nonce = c8ef445540186351d9108ad64d7a5b65& scope = https：％2F％2Fwww.googleapis.com％2Fauth％2Fcalendar 
  

我使用crypto-js库的MD5函数生成了随机数。这里是请求标头：

$ p $ 接受：application / json，text / plain，* / *
Origin：http ：// localhost：8000
Referer：http：// localhost：8000 / admin
User-Agent：Mozilla / 5.0（Macintosh; Intel Mac OS X 10_11_4）
AppleWebKit / 537.36（KHTML ，像Gecko）Chrome / 49.0.2623.112 Safari / 537.36


我从google获得的回复如下所示：

  alt-svc：quic =：443; MA = 2592000; v =32,31,30,29,28,27,26,25
替代协议：443：quic 
缓存控制：no-cache，no-store，max-age = 0，必须重新验证
 content-encoding：gzip 
 content-type：text / html; charset = utf-8 
 date：Mon，18 Apr 2016 07:16:21 GMT 
过期：1990年1月1日星期五00:00:00 GMT 
编译指示：no-cache 
服务器：GSE 
 status：400 
 x-content-type-options：nosniff 
 x-frame-options：SAMEORIGIN 
 x-xss-protection：1; mode = block 
  

我在我的chrome devtools控制台中看到这个日志：

  XMLHttpRequest无法加载https://accounts.google.com/o/oauth2/v2/auth?response_type=token&client_id={client id here& amp ;范围= HTTPS：％2F％2Fwww.googleapis.com％2Fauth％2Fcalendar。请求的资源上没有Access-Control-Allow-Origin标题。因此不允许访问Origin'http：// localhost：8000'。响应的HTTP状态代码为400. 
  

我已经确认在我的Google应用程序控制台中，相应的客户端ID，我已将 http：// localhost：8000 添加到Authorized Javascript Origins字段中，而我已经确保启用谷歌日历API的授权。我读过，Web客户端隐式认证流程不使用重定向的URI，但我已经尝试填补了这一点，无论（我试过的值 http：// localhost：8000 和 http：// localhost：8000 / admin ，这是我发送我的请求的页面）。花了几个小时搜索这个，我没有发现任何暗示我在做什么不应该。

所以我的问题是，如果我允许< a href =http：// localhost：8000 =nofollow> http：// localhost：8000 作为我的客户端ID的授权来源，为什么我仍然无法发送请求（尽管通过javascript）到该auth端点？

解决方案

我相信你应该重定向浏览器到这个oauth2端点，而不是仅仅试图一个Ajax请求。

https：//开发者。 google.com/identity/protocols/OAuth2UserAgent#overview

I'm trying to make request from client-side javascript to the google oauth endpoint (https://accounts.google.com/o/oauth2/v2/auth) with a google calendar scope. Thing is, I can't use google's javascript client, because I'm actually using webpack, and I don't want to have separately include a javascript script outside of my bundle.js.

So instead, I'm using axios (https://github.com/mzabriskie/axios) to make the HTTP GET to the aforementioned token endpoint. Here's what my request looks like:

https://accounts.google.com/o/oauth2/v2/auth?response_type=token&client_id={client id here}&nonce=c8ef445540186351d9108ad64d7a5b65&scope=https:%2F%2Fwww.googleapis.com%2Fauth%2Fcalendar

I generated the nonce using the crypto-js library's MD5 function. Here are the request headers:

Accept:application/json, text/plain, */*
Origin:http://localhost:8000
Referer:http://localhost:8000/admin
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.112 Safari/537.36

The response I get from google looks like this:

alt-svc:quic=":443"; ma=2592000; v="32,31,30,29,28,27,26,25"
alternate-protocol:443:quic
cache-control:no-cache, no-store, max-age=0, must-revalidate
content-encoding:gzip
content-type:text/html; charset=utf-8
date:Mon, 18 Apr 2016 07:16:21 GMT
expires:Fri, 01 Jan 1990 00:00:00 GMT
pragma:no-cache
server:GSE
status:400
x-content-type-options:nosniff
x-frame-options:SAMEORIGIN
x-xss-protection:1; mode=block

And I see this log in my chrome devtools console:

XMLHttpRequest cannot load https://accounts.google.com/o/oauth2/v2/auth?response_type=token&client_id={client id here}&scope=https:%2F%2Fwww.googleapis.com%2Fauth%2Fcalendar. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access. The response had HTTP status code 400.

I've made sure that in my google app console, under the corresponding client id, I've added http://localhost:8000 to the "Authorized Javascript Origins" field, and I've made sure to enable authorization for the google calendar api. I've read that the web client implicit auth flow doesn't use the redirect uri, but I've tried filling that out regardless (I've tried the values http://localhost:8000 and http://localhost:8000/admin, which is the page I'm sending my request from). Having spent hours googling this, I've found nothing to suggest that what I'm doing shouldn't work.

So my question is, if I've allowed http://localhost:8000 as an authorized origin for my client ID, why am I still not able to send a request (albeit via javascript) to that auth endpoint?

解决方案

I believe you should redirect the browser to this oauth2 endpoint rather than just trying to make an ajax request to it.

https://developers.google.com/identity/protocols/OAuth2UserAgent#overview

这篇关于Google oauth 400响应：请求的资源上没有“Access-Control-Allow-Origin”标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！