Cross domain request intercepted: the same origin policy prohibits reading remote resources at the interface: Reason: CORS lacks access converter allow origin

Problem record

Today, the author once encountered a cross domain problem at the front and back ends. The following small series records the whole process in detail:
The environment is: the back end is in the company, the front end is in the remote, and the two people work together to develop
After the back-end writes the interface and publishes it on the Internet, the next step is the docking interface stage of the remote front-end. When the front-end configures the interface, the configuration is successful. During test access, the browser reports that "cross domain requests have been intercepted: the homology policy prohibits reading remote resources located on the interface: the reason: CORS lacks access converter allow origin", and the error prompt is "CORS cross domain problem", The back-end sees that only the pre request has been received. At this moment, neither of them is sure who the problem is. They both start to solve this problem. Well, Xiaobian temporarily replaces him to cooperate with the back-end joint debugging. First, use the previous normal login interface to cooperate with him for joint debugging. During joint debugging, the same problem still occurs. At this time, it is judged that there is a problem with the configuration of the back-end request rules. Solutions will be recorded later in this article. After the back-end is solved and the two joint debugging are normal, the next step is the joint debugging of the remote front-end and back-end. As a result, there is still a problem in the debugging, which shows that the problem is the configuration of the front-end. Sure enough, Xiaobian has solved the problem after configuring his main.js file to him. This is the end of the problem. The solution will be recorded in detail below!!

front end

Novice configuration: Problem

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import router from './router'
import store from './store'

Vue.config.productionTip = false
Vue.prototype.$axios = axios
Vue.prototype.$http = axios // Globally mount axios
const base_url = 'httt://117.xx.xx.198:1024/'
axios.defaults.baseURL = base_url

axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8' /
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')
error

Error correction Division:

axios is defined globally twice, and one is removed or annotated
The import of axios in the main.js file should be after the import of store, and the location is wrong

Veteran configuration: normal

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// import elementui from 'element-ui'
// Import "element UI / lib / theme talk / index. CSS" / / element UI style
import axios from 'axios'

Vue.config.productionTip = false
// Vue.use(elementui)

Vue.prototype.$http = axios

// const base_url = ''
const base_url = 'http://117.xx.xx.198:1024'
axios.defaults.baseURL = base_url
localStorage.setItem('base_url', base_url)

axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8'


new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

back-end

The backend is written in python and configured in the setting.py file

Novice configuration: Problem

"""
Django settings for Project project.

Generated by 'django-admin startproject' using Django 3.1.13.

For more information on this file, see
https://docs.djangoproject.com/en/3.1/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/3.1/ref/settings/
"""
import os
from pathlib import Path

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.1/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'evwet_y=%^7$b)r3o9we47^5h&@_)ekojx5v+tlh!$tgo)$5ux'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = ['*']


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
     '_____________',   #Missing headers configuration import for cors
    'django.contrib.staticfiles',
    'user',
    'rest_framework',
    'devices'
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    '______________________________________',     #A cors middleware is missing
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'Project.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')]
        ,
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'StudentCourseSelection.wsgi.application'


# Database
# https://docs.djangoproject.com/en/3.1/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}


# Password validation
# https://docs.djangoproject.com/en/3.1/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/3.1/topics/i18n/

LANGUAGE_CODE = 'zh-Hans'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/

STATIC_URL = '/static/'

Veteran configuration: normal

"""
Django settings for Project project.

Generated by 'django-admin startproject' using Django 3.1.13.

For more information on this file, see
https://docs.djangoproject.com/en/3.1/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/3.1/ref/settings/
"""
import os
from pathlib import Path

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.1/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'evwet_y=%^7$b)r3o9we47^5h&@_)ekojx5v+tlh!$tgo)$5ux'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = ['*']


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'corsheaders',  #####################
    'django.contrib.staticfiles',
    'user',
    'rest_framework',
    'devices'
]

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

ROOT_URLCONF = 'Project.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')]
        ,
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'StudentCourseSelection.wsgi.application'


# Database
# https://docs.djangoproject.com/en/3.1/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}


# Password validation
# https://docs.djangoproject.com/en/3.1/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/3.1/topics/i18n/

LANGUAGE_CODE = 'zh-Hans'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/

STATIC_URL = '/static/'

Error correction Division:

INSTALLED_ Incomplete configuration at APS, plus corsheaders
Corshearers.MIDDLEWARE.corsmiddleware should be configured in midview

summary

Xiaobian feels that if there is a problem at work, we should cooperate in time to solve the problem better and faster. At the same time, I warn you to be serious and careful. The same is true for the code. I believe you often have problems caused by one letter. You just need to be serious.

Keywords: Javascript Vue.js

Added by Celadon on Fri, 12 Nov 2021 17:06:04 +0200

Programming VIP

Cross domain request intercepted: the same origin policy prohibits reading remote resources at the interface: Reason: CORS lacks access converter allow origin

Problem record

front end

Novice configuration: Problem

Error correction Division:

Veteran configuration: normal

back-end

Novice configuration: Problem

Veteran configuration: normal

Error correction Division:

summary

Popular Keywords