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 )和Google日历范围.问题是，我不能使用Google的javascript客户端，因为我实际上是在使用webpack，并且我不想在bundle.js之外单独包含javascript脚本.

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.

因此，我改用axios( https://github.com/mzabriskie/axios )以使HTTP GET到达上述令牌端点.这是我的要求:

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

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

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

我从Google收到的回复如下:

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

然后在chrome devtools控制台中看到以下日志:

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.

我确保在我的Google App控制台的相应客户端ID下，添加了 http://localhost:8000 到"Authorized Javascript Origins"字段，并且我已经确保为Google Calendar API启用授权.我已经了解到Web客户端隐式身份验证流不使用重定向uri，但是无论如何我都尝试填写该内容(我尝试过 http://localhost:8000 和 http://localhost:8000/admin ，这是我从其发送请求的页面.花了几个小时的时间进行搜索，但我发现没有任何东西可以暗示我在做的事不起作用.

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.

所以我的问题是，如果我允许 http://localhost:8000 作为我的客户端的授权来源ID，为什么我仍然无法向该身份验证端点发送请求(尽管通过javascript)?

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?

推荐答案

我相信您应该将浏览器重定向到此oauth2端点，而不仅仅是尝试向其发出ajax请求.

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屋！