什么是跨域？

在前后端分离的项目中，跨域是一个必不可少的问题，也是一个很正常的问题，那么什么是跨域？
跨域就是基于同源策略，不同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-OriginAccess-Control-Allow-CredentialsAccess-Control-HeadersAccess-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

Django 跨域问题解决相关推荐

Flak——跨域问题解决
Flask--跨域问题解决背景:最近在使用Flak-restful+Vue来做一个app,将Vue打包在了一个安卓的壳子里面.但是这期间出现了一个比较有意思的问题--跨域.做后端开发的兄弟应该在前后 ...
ssm把图片保存到项目中_项目中的图片跨域问题解决方式
现象首先,在生产环境中,由于进行编辑图片时,将图片回显到ReactCrop组件中进行可裁剪编辑,然而回显时,需要将图片转化为base64的格式或者blob对象, 此时需要将图片次绘制成canvas进 ...
Tomcat中的字体请求跨域问题解决
Tomcat中的字体请求跨域问题解决原作者地址: https://blog.csdn.net/u011974399/article/details/79990505 修改tomcat的web.xml ...
django-vue-admin前端设置后台接口地址为127.0.0.1产生跨域问题解决办法
django-vue-admin前端设置后台接口地址为127.0.0.1产生跨域问题解决办法: 不能设置成127.0.0.1,设置成节点的ip地址即可解决. 应该是脚手架本身存在问题导致的.
Fiddler跨域调试及Django跨域处理
------·今天距2021年267天·------ 这是ITester软件测试小栈第109次推文在上一篇Fiddler系列文章:Fiddler设置断点(一),主要介绍了通过Automatic Br ...
Djiango django跨域 cookie session
一.django跨域问题 1.什么时跨域通常情况下,A网页访问B服务器资源时,满足以下三个条件其一就是跨域访问 1. 协议不同 2. 端口不同 3. 主机不同 2.django解决跨域安装djan ...
ajax跨域问题解决(spring boot)
ajax跨域问题解决(spring boot) 参考文章: (1)ajax跨域问题解决(spring boot) (2)https://www.cnblogs.com/cosyer/p/6589874 ...
vue中axios访问Java后端跨域问题解决
vue中axios访问Java后端跨域问题解决参考文章: (1)vue中axios访问Java后端跨域问题解决 (2)https://www.cnblogs.com/soinve/p/9295009 ...
WebSocket跨域问题解决
WebSocket跨域问题解决参考文章: (1)WebSocket跨域问题解决 (2)https://www.cnblogs.com/goeasycloud/p/9389360.html 备忘一下.

Django 跨域问题解决