Django CORS Access-Control-Allow-Origin缺失

Question

我正在尝试在我的django应用中实施google oauth2身份验证。 我按照文档按照所有步骤操作。

在浏览器地址栏上，如果我浏览此https://foo.bar.net/api/v1/auth/login/google-oauth2/此网址，它会通过Google正确验证并返回google-auth-token提到的redirect-url并且它获取auth-token并将其转换为普通令牌，然后以json格式发送给用户或前端。

但是如果我试图从我的js代码向上面提到的URL发出GET请求，它会显示出来

Reason: CORS header 'Access-Control-Allow-Origin' missing

前端的完整回溯看起来像，

GET https://foo.bar.net/api/v1/auth/login/google-oauth2/ 302 Found 718ms    
polyfil...ndle.js (line 7507)
GET https://accounts.google.com/o/oauth2/auth?client_...DW&response_type=code&scope=openid+email+profile 200 OK
Login Failed Response { _body=Event error,  status=0,  ok=false,  more...}
main.bundle.js (line 367)
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://accounts.google.com/o/oauth2/auth?client_id=kguygvh868697-khgkhvkgvkgkgv.apps.googleusercontent.com&redirect_uri=https://foo.bar.net/api/v1/auth/complete/google-oauth2/&state=Cbms1QhSQVzjO3xkjhkyuu&response_type=code&scope=openid+email+profile. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

我搜索了谷歌，它提示我安装djang-CORS-headers 。 我已经安装并配置了上面的包。 但是出现了同样的错误。

我的settings.py的一部分看起来像，

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'oauth2_provider.middleware.OAuth2TokenMiddleware',
]

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'oauth2_provider',
    'corsheaders',
    'rest_framework_swagger',
]

CORS_ORIGIN_ALLOW_ALL = True

实际上我们有前端（ang）和后端（django）两个独立的项目。 我同意ajax问题。 所以我让google oauth url在一个单独的窗口中打开。

在后端，我已经完成了获取服务器访问令牌并将其与我们的应用程序的访问令牌交换。 目前我正在以json格式返回令牌详细信息。 所以这个json将显示在新打开的窗口中。 但不知道该怎么做

1. 从窗口获取令牌并将其存储在浏览器的临时存储中。

2. 一旦细节出现，关闭新窗口。

3. 通过在请求标头中传递令牌信息来重定向到用户/配置文件页面。

不知道这个oauth流程是否正确。而且我也不希望完整的oauth流程在js部分（oauth隐式流程）。 请指导我正确的方向。

Answer 1

问题是授权代码流不应该在前端使用，您需要在此处使用隐式流（ https://developers.google.com/actions/identity/oauth2-implicit-flow ）而不是授权代码流（ https ：//developers.google.com/actions/identity/oauth2-code-flow ）

我想你也错过了提到允许的标题

  CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
)