什么是跨域？
在前后端分离的项目中，跨域是一个必不可少的问题，也是一个很正常的问题，那么什么是跨域？
跨域就是基于同源策略，不同IP、域名、端口都算作跨域。
同源策略是浏览器的安全策略。
- 同源：同源(ip地址、协议、端口都相同才是同源)，不同源就是跨域
- 跨域：分为简单请求跨域和复杂请求跨域
报错如下：
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
预检请求：
跨域解决办法一：
主要分以下几步：
- django项目中做如下配置：
安装插件：
pip install django-cors-headers
- 将 corsheaders 添加到 INSTALLED_APPS 中
INSTALLED_APPS = [
'corsheaders',
]
- 中间件中添加如下配置：
在官网解释中，如果不添加到最前面，它无法将cors标识请求头添加到这些响应中。
MIDDLEWARE_CLASSES = [
'corsheaders.middleware.CorsMiddleware',
.....
]
- 设置白名单
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
扫描二维码关注公众号，回复：
13116065 查看本文章
Nginx跨域配置：https://blog.csdn.net/qq_35720307/article/details/89680726