Cross domain

Due to the development mode of front-end and back-end separated development, usually, front-end and back-end may run under different IP or port, resulting in cross-domain problems, so it is explained separately

What is cross-domain

Cross-domain refers to a document or script in one domain trying to request a resource in another domain. Cross-domain is defined broadly here. In fact, what we usually mean by cross-domain is narrowly defined, a class of request scenarios that are restricted by the browser’s same-origin policy.

What is the same origin policy?

The Same Origin Policy (SOP) is a convention introduced by Netscape into the browser in 1995. It is the core and most basic security function of the browser. Without the Same Origin policy, the browser is vulnerable to XSS and CSFR attacks. Same-origin means that the protocol, domain name, and port are the same. Even if two different domain names point to the same IP address, they are not same-origin.

The same origin policy restricts the following behaviors:

  1. Cookie, LocalStorage, and IndexDB cannot be read
  2. DOM and Js objects are not available
  3. AJAX requests cannot be sent

Cross-domain error The browser displays the following error message in the console:

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

Translation is that: from the source address of http://127.0.0.1:3000 to http://127.0.0.1:8000/api/test/ XMLHttpRequest access violation of the same origin policy: There is no access-Control-Allow-Origin value in the request header

Front-end solutions cross domains

Refer to the blog

Since cross-domain is because of different sources, then I am not finished with the same source, but the back-end request address can not be changed, so you can add a layer of proxy between the front end and the back end, through the proxy to access the back end. The proxy function is already provided in vue-CLI. You only need to configure it. The config/index.js file in the root directory contains the following configuration items:

proxyTable: {
      '/': { 
        target: 'http://127.0.0.1:8000/'.changeOrigin: true.pathRewrite: {
          '^/api': ' '}}},Copy the code
  • ‘/’ means that paths starting with ‘/'(that is, all paths) require proxies,
  • Target: the target server address (back-end server address) of the agent is ‘http://127.0.0.1:8000/’,
  • ChangeOrigin: changes the source address in the request
  • PathReWrite: URL pathReWrite, replacing ‘/ API ‘with ” for paths starting with ‘/ API’

Back-end solutions cross domains

Refer to the blog

For security reasons, the backend also has cross-domain restrictions. The solutions are as follows:

Install django – cors – headers

$ pip install django-cors-headers
Copy the code

Configure settings.py file

INSTALLED_APPS = [
    ...
    'corsheaders'. ]  MIDDLEWARE_CLASSES = ( ...'corsheaders.middleware.CorsMiddleware'.'django.middleware.common.CommonMiddleware'.# Pay attention to order...).# Cross-domain increase ignore
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
    The '*'
)

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'.)Copy the code