什麼是跨域？

在前後端分離的項目中，跨域是一個必不可少的問題，也是一個很正常的問題，那麼什麼是跨域？
跨域就是基於同源策略，不同IP、域名、端口都算作跨域。
同源策略是浏覽器的安全策略。

1. 同源：同源(ip地址、協議、端口都相同才是同源)，不同源就是跨域
2. 跨域：分為簡單請求跨域和復雜請求跨域

報錯如下：

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.

什麼是復雜請求：

（1) 請求方法是以下三種方法之一：（也就是說如果你的請求方法是什麼put、delete等肯定是非簡單請求）
HEAD
GET
POST
（2）HTTP的頭信息不超出以下幾種字段：（如果比這些請求頭多，那麼一定是非簡單請求）
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限於三個值application/x-www-form-urlencoded、
multipart/form-data、text/plain，也就是說，如果你發送的
application/json格式的數據，那麼肯定是非簡單請求，vue的axios默認的請求
體信息格式是json的，ajax默認是urlencoded的。

浏覽器對於這兩種請求也是不一樣的：

* 簡單請求和非簡單請求的區別？
簡單請求：一次請求
非簡單請求：兩次請求，在發送數據之前會先發一次請求用於做“預檢”，只有“預檢”通過後才再發送一次請求用於數據傳輸。
* 關於“預檢”
- 請求方式：OPTIONS
- “預檢”其實做檢查，檢查如果通過則允許傳輸數據，檢查不通過則不再發送真正想要發送的消息
- 如何“預檢”
=> 如果復雜請求是PUT等請求，則服務端需要設置允許某請求，否則“預檢”不通過
Access-Control-Request-Method
=> 如果復雜請求設置了請求頭，則服務端需要設置允許某請求頭，否則“預檢”不通過
Access-Control-Request-Headers

預檢請求：

跨域解決辦法一：

主要分以下幾步：

1. django項目中做如下配置：

安裝插件：
pip install django-cors-headers

2. 將 corsheaders 添加到 INSTALLED_APPS 中

INSTALLED_APPS = [
'corsheaders',
]

3. 中間件中添加如下配置：

在官網解釋中，如果不添加到最前面，它無法將cors標識請求頭添加到這些響應中。

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

4. 設置白名單

CORS_ORIGIN_WHITELIST = [ #只有localhost:8000才可以跨域訪問
'localhost:8000'
]
# CORS_ORIGIN_ALLOW_ALL = True #所有域名都可以跨域訪問

官網：https://pypi.org/project/django-cors-headers/

跨域解決方法二：

使用前後端不分離的方式開發。

這種情況也說不准，如果在不同的服務器也會存在跨域。
假如前端還是服務器模版語言，需要後端去渲染，整體運行部署就是一個地址，不存在跨域。
另外部署方式和跨域問題沒有太大關系。

跨域解決方式三：

nginx中設置4個頭。
Access-Control-Allow-Origin
Access-Control-Allow-Credentials
Access-Control-Headers
Access-Control-Allow-Methods

參考文獻：

跨源資源共享（CORS）：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

同源和跨域、CSRF詳解：https://blog.csdn.net/qq_39253370/article/details/105684890

Nginx跨域配置：https://blog.csdn.net/qq_35720307/article/details/89680726