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 的 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 函数生成了 nonce.这是请求标头:

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

我在我的 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 应用程序控制台中，在相应的客户端 ID 下，我添加了 http://localhost:8000 到Authorized Javascript Origins"字段，并且我已确保为谷歌日历 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屋！