Django CORS Access-Control-Allow-Origin missing

Question

I'm trying to implement google oauth2 authentication in my django app. I have followed all the steps as per the docs.

On the browser address bar,if I browser this https://foo.bar.net/api/v1/auth/login/google-oauth2/ this url, it properly authenticated by google and it returns a google-auth-token to the mentioned redirect-url and it fetches the auth-token and converts it to a normal token which then sends to the user or frontend in json format.

But if I tried to make a GET request to the above mentioned url from my js code, it shows

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

Full traceback on the frontend looks like,

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).

I have searched google which prompts me to install djang-CORS-headers. I have installed and configured the above package. But the same error appears.

A part of my settings.py looks like,

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

Actually we have two separate projects for both frontend(ang) and backend(django). I'm agree with ajax issue. So that I made the google oauth url to get opened in a separate window.

In the backend, I have done upto getting the server access token and exchange it with our application's access token. Currently I'm returning the token details in json format. So this json would be displayed in the newly opened window. But don't know how to

1. get the token from the window and store it to a temp storage on the browser.

2. close the new window once the details got appeared.

3. redirect to users/profile page by passing the token information in the request header.

Don't know whether this oauth flow is correct or not.. And also I don't want full oauth flow to be in the js part(oauth implicit flow). Pls guide me in the right direction.

Answer 1

The problem is the Authorization code flow should not be used in front end, you need to use implicit flow here (https://developers.google.com/actions/identity/oauth2-implicit-flow) instead of authorization code flow(https://developers.google.com/actions/identity/oauth2-code-flow)

I think you also have missed to mention the headers allowed

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