Django CORS Access-Control-Allow-Origin 缺失

Question

我正在尝试在我的 django 应用程序中实现 google oauth2 身份验证。我已按照docs执行所有步骤。

在浏览器地址栏上，如果我浏览这个

https://foo.bar.net/api/v1/auth/login/google-oauth2/

这个 url，它会通过 google 正确进行身份验证，并将 google-auth-token 返回到提到的重定向 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',
)

Answer 2

有人知道如何解决这个问题吗？ 正如阿维纳什在他最初的问题中提到的那样。使用代码的访问令牌由 Django 在后端获取。

后端流程运行良好。 这只是前端 (JS) 向 django 后端发送 get 请求以启动 Oauth 流程时的一个问题。

收到错误 - 原因：CORS 标头“Access-Control-Allow-Origin”丢失

Avinash 你解决这个问题了吗？