What is cross-domain ？

In projects where the front and back ends are separated , Cross domain is an essential issue , It is also a very normal problem , So what is cross domain ？
Cross domain is based on the same origin policy , Different IP、 domain name 、 Ports count as cross domain .
The same origin policy is the browser's security policy .

1. Homology ： Homology (ip Address 、 agreement 、 All ports are the same ), Different sources are cross domain
2. Cross domain ： It is divided into simple request cross domain and complex request cross domain

An error is as follows ：

Access to XMLHttpRequest at 'http://xx.xx.xx:80/api/otp/send-code'
from origin 'http://localhost:8080' has been blocked by CORS policy:
Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

What is a complex request ：

（1) The request method is one of three ：（ That is to say, if your request method is put、delete Wait for sure is not a simple request ）
HEAD
GET
POST
（2）HTTP The header information of does not exceed the following fields ：（ If there are more than these request headers , Then it must be a non simple request ）
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type： Three values only application/x-www-form-urlencoded、
multipart/form-data、text/plain, in other words , If you send
application/json Formatted data , Then it must be a simple request ,vue Of axios Default request
The body information format is json Of ,ajax The default is urlencoded Of .

Browsers are also different for these two requests ：

* The difference between simple request and non simple request ？
A simple request ： One request
It's not a simple request ： Two requests , Before sending data, a request will be sent to do “ preview ”, Only “ preview ” Send another request for data transmission after passing .
* About “ preview ”
- Request mode ：OPTIONS
- “ preview ” In fact, check it out , Check that data transfer is allowed if passed , If the check fails, the message that you really want to send will not be sent
- how “ preview ”
=> If the complex request is PUT Equal request , Then the server needs to set to allow a request , otherwise “ preview ” Not through
Access-Control-Request-Method
=> If a complex request has a request header set , The server needs to set a request header to allow , otherwise “ preview ” Not through
Access-Control-Request-Headers

Pre inspection request ：

Cross domain solution one ：

It is mainly divided into the following steps ：

1. django The following configurations are made in the project ：

 Installing a plug-in ：
pip install django-cors-headers

2. take corsheaders Add to INSTALLED_APPS in

INSTALLED_APPS = [
'corsheaders',
]

3. Add the following configuration to the middleware ：

In the official website explanation , If you don't add it to the front , It can not cors Identification request headers are added to these responses .

MIDDLEWARE_CLASSES = [
'corsheaders.middleware.CorsMiddleware',
.....
]

4. Set the whitelist

CORS_ORIGIN_WHITELIST = [ # Only localhost:8000 Can be accessed across domains 
'localhost:8000'
]
# CORS_ORIGIN_ALLOW_ALL = True # All domain names can be accessed across domains 

Official website ：https://pypi.org/project/django-cors-headers/

Cross domain solution 2 ：

The front and back ends are not separated .

 This situation is also uncertain , If there are different servers, there will be cross domain .
If the front end is still the server template language , You need the backend to render , The overall operation deployment is an address , There is no cross domain .
In addition, the deployment mode has little to do with cross domain issues .

Cross domain solution 3 ：

nginx Set in 4 Head .
Access-Control-Allow-Origin
Access-Control-Allow-Credentials
Access-Control-Headers
Access-Control-Allow-Methods

reference ：

Cross source resource sharing （CORS）：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

Homology and cross domain 、CSRF Detailed explanation ：https://blog.csdn.net/qq_39253370/article/details/105684890

Nginx Cross domain configuration ：https://blog.csdn.net/qq_35720307/article/details/89680726