Detailed steps to solve cross-domain problem in Django+vue

Cross-domain

Since the development model is a separate front-end development, usually, the front-end and back-end may run different IPs or ports, resulting in cross-domain problems. Therefore, it is explained separately

What is cross-domain

Cross-domain refers to a document or script under one domain trying to request resources under another domain. Here cross-domain is broad.

In fact, what we usually call cross-domain is a narrow sense, and is a type of request scenario restricted by the browser's homologous policy.

What is a homologous strategy?

Same origin policy/SOP (Same origin policy) is a convention introduced by Netscape in 1995. It is the most core and basic security function of the browser. If the same origin policy is missing, the browser is vulnerable to attacks such as XSS and CSFR. The so-called homologous origin refers to the same "protocol + domain name + port". Even if two different domain names point to the same IP address, they are not homologous.

Homologous policies restrict the following behaviors:

1. Cookies, LocalStorage, and IndexDB cannot be read
2. DOM and Js objects cannot be obtained
3. AJAX request cannot be sent

Cross-domain error browser will have the following error in the console:

The error message is as follows:

Access to XMLHttpRequest at ' http://127.0.0.1 :8000/api/test/' from origin ' http://127.0.0.1 :3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Translated: XMLHttpRequest access initiated from the source address http://127.0.0.1 :3000 to http://127.0.0.1 :8000/api/test/ violates the same-origin policy: because there is no Access-Control-Allow-Origin value in the request header

Front-end solution to cross-domain

Reference blog

Since cross-domain is due to different sources, I am not going to be done with the same origin, but the backend request address cannot be changed, so you can add a layer of proxy between the frontend and the backend, and the frontend accesses the backend through the proxy.

The function of proxy has been provided in the Vue-cli tool, and only configuration is required.

There are the following configuration items in the config/file in the root directory:

proxyTable: {
   '/': { 
    target: 'http://127.0.0.1:8000/',
    changeOrigin: true,
    pathRewrite: {
     '^/api': ''
    }
   }
  },

1. '/' means that paths starting with '/' (i.e. all paths) require proxy.
2. target: The target server address of the proxy (i.e. the backend server address) is 'http://127.0.0.1:8000/',
3. changeOrigin, for modifying the source: modify the source address in the request
4. pathReWrite: URL path rewrite, replace '/api' with '' for paths starting with '/api'

Backend solution to cross-domain

Reference blog

For security reasons, the backend will also have restrictions on cross-domain. The solution is as follows:

Install django-cors-headers

$ pip install django-cors-headers

Configuration File

INSTALLED_APPS = [
  ...
  'corsheaders'，
  ...
 ] 

MIDDLEWARE_CLASSES = (
  ...
  '',
  '', # Pay attention to the order  ...
)
#Span-domain addition ignoreCORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
  '*'
)

CORS_ALLOW_METHODS = (
  'DELETE',
  'GET',
  'OPTIONS',
  'PATCH',
  'POST',
  'PUT',
  'VIEW',
)

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

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.