导读：很多朋友问到关于django怎么解决跨域的相关问题，本文首席CTO笔记就来为大家做个详细解答，供大家参考，希望对大家有所帮助！一起来看看吧！
什么是跨域、怎么解决跨域？
一个请求url的** 协议、端口、域名 **其中任意一个与当前页面url不相同就是跨域
即： （http/https）协议、（segmentfault）主域名、（www）子域名、（8080）端口
是因为浏览器的同源策略的限制，同源策略是一种安全策略，同源指的是域名，协议，端口相同，会阻止一个域的js脚本和另一个域的内容进行交互。防止在一个浏览器中的两个页面产生不安全、异常的行为。
当然如果不同源的话会产生一定的限制：
【1】无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
【2】无法接触非同源网页的 DOM
【3】无法向非同源地址发送 AJAX 请求
document.createElement(‘script’) 生成一个 script 标签，然后插 body 里而已。
JSONP的实现原理就是创建一个script标签, 再把需要请求的api地址放到src里. 这个请求只能用GET方法, 不可能是POST（向服务端传送数据）。
一种非正式传输协议，它会允许用户传递一个callback参数给服务端，然后服务端返回数据的时候会将这个callback参数作为函数名来包裹住JSON数据，然后客户端就可以随意的定义自己的函数来处理返回的数据了。
一般是后端在处理请求数据的时候，添加允许跨域的请求头信息，服务端设置Access-Control-Allow-Origin就可以，如果需要携带cookie，前后端都需要设置
window对象有个name的属性，在一个window下，窗口载入的页面都是共享一个window.name。
在a.html中，怎么把b.html页面加载进来，获取b.html的数据。在a.html页面使用iframe，可以去获取b.html的数据，然后在a.html页面中取得iframe获取得数据。
但是iframe想要获取b.html中的数据，只需要给这个iframe的src设为就可以，如果a.html想要得到iframe所获得的数据，也就是iframe的window.name的值，还要把这个iframe的src设成跟a.html页面同一个域才可以，不然a.html访问不到iframe里的window.name属性。
// 父窗口打开一个子窗口
var openWindow = window.open('', 'title');
// 父窗口向子窗口发消息(第一个参数代表发送的内容，第二个参数代表接收消息窗口的url)
openWindow.postMessage('Nice to meet you!', '');
调用message事件，监听对方发送的消息
// 监听 message 消息
window.addEventListener('message', function (e) {
console.log(e.source); // e.source 发送消息的窗口
console.log(e.origin); // e.origin 消息发向的网址
console.log(e.data); // e.data 发送的消息
},false);
server{
# 监听9099端口
listen 9099;
# 域名是localhost
server_name localhost;
#凡是localhost:9099/api这个样子的，都转发到真正的服务端地址
location ^~ /api {
proxy_pass ;
}
}
// 请求的时候直接用回前端这边的域名，这就不会跨域，然后Nginx监听到凡是localhost:9099/api这个样子的，都转发到真正的服务端地址
fetch('', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
msg: 'helloIframePost'
})
})
django+vue无法设置跨域cookies
后端开发环境：Django 3.2.9
前端开发环境：vue3 + ts
浏览器版本：chrome（96.0.4664.45）
问题：
最近开发一个新项目，前端使用axios进行http类的封装，前后端分离进行api调试，进行登录后，后续的api调用发现无法识别到cookie。
尝试情况：
1、axios设置withCredentials，无效
2、分析api请求和响应信息，发现响应标头有一段警告信息
3、联想到既然是响应标头出现报警信息，那么可以考虑从django入手。在官网上输入"SAMESITE"，果然找到了相关的说明，通过在settings.py设置 SESSION_COOKIE_SAMESITE='None' 和 SESSION_COOKIE_SECURE=True 后成功解决问题。
ajax跨域问题(python版本)
跨域问题来源于JavaScript的同源策略，即只有 协议+主机名+端口号 (如存在)相同，则允许相互访问。即JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。
注意：localhost和127.0.0.1也属于跨域。
如果Origin指定的源不在许可范围内, 服务器会返回一个不带有Access-Control-Allow-Origin字段的响应 . 浏览器解析时发现缺少了这个字段, 就会报错.
修改Django中的views.py文件修改views.py中对应API的实现函数，给返回值加上响应头Access-Control-Allow-Origin，允许其他域通过Ajax请求数据：
满足以下两个条件的请求。
(1) 请求方法是以下三种方法之一：
(2) HTTP的头信息不超出以下几种字段：
非简单请求就是复杂请求。
非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。
预检请求为OPTIONS请求，用于向服务器请求权限信息的。
预检请求被成功响应后，才会发出真实请求，携带真实数据。
JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。
JSONP的实现步骤大致如下(参考了来源中的文章)
请求时,接口地址是作为构建出的脚本标签的src的,这样,当脚本标签构建出来时,最终的src是接口返回的内容
这时，只要浏览器定义了foo函数，该函数就会立即调用。作为参数的JSON数据被视为JavaScript对象，而不是字符串，因此避免了使用JSON.parse的步骤。
JSONP使用注意
基于JSONP的实现原理,所以JSONP只能是“GET”请求,不能进行较为复杂的POST和其它请求,所以遇到那种情况,就得参考下面的CORS解决跨域了(所以如今它也基本被淘汰了)。
前面讲了JSONP的实现原理，现在我们可以自己写JS来实现JSONP功能。
一般情况下，我们希望这个script标签能够动态的调用，而不是像固定在html里面所以没等页面显示就执行了，很不灵活。
我们可以通过页面的触发事件操作后，通过javascript动态的创建script标签，这样我们就可以灵活调用远程服务。实例如下：
为了更加灵活，上述我们将你自己在客户端定义的回调函数的函数名传送给服务端，服务端则会返回以你定义的回调函数名的方法，将获取的json数据传入这个方法完成回调。
如上，jQuery框架也当然支持JSONP，可以使用 $.getJSON(url,[data],[callback]) 方法。
与js实现的方式相比，我们并不要自己生成一个script标签，客户端也并不需要自己定义一个回调函数.
上述这种方法，很方便，不需要我们自己定义回调函数和指定回调函数名，但是，如果说我们想指定自己的回调函数名，或者说服务上规定了固定回调函数名该怎么办呢？
我们可以使用$.ajax方法来实现。如下例：
在上小节中jsonp: 'callbacks'就是定义一个存放回调函数的键，jsonpCallback是前端定义好的回调函数方法名，server端接受callback键对应值后就可以在其中填充数据打包返回。
但是，jsonpCallback参数可以不定义，jquery会自动定义一个随机名发过去，那前端就得用回调函数来处理对应数据了。利用jQuery可以很方便的实现JSONP来进行跨域访问。
如此，我们的跨域处理即完成，支持所有的请求。
解决携带身份信息的跨域请求
![Y$EL]}B8CA)OU{)L 6F3WFD.png
axios 中这样设置
当前端配置修改后请求跨域就会出现第一步的错误，这时候就需要在服务器端设置了。
（顺带一说，感谢我的后端小伙伴成少在这个寂寞的夜晚陪我搞到深夜）
现在的情况是只有前端同意跨域请求携带cookie了，而后端还没有同意。所以在后台配置中也设置一下就好了。
django中setting.py的配置
[图片上传失败...(image-90d7c0-1556455798141)]
django和vue初次接触
因为要改一些以前的需求,主管让我学习一下vue,花了半天的时间算是入了门,就要拿成熟的项目去改,这个难度还是挺大的.
熟悉网站建设的人应该都知道vue是一个出色的前端框架,而django是python语言体系下的一个后端框架,虽然说他们两个都可以写出完整的网站,但是各有侧重点,django发开速度快,但是本身自带的模板引擎比较孱弱,而vue是以数据驱动和组件化的思想构建,在渲染页面方面实属一流,所以作为python开发者,有时候就会将这个两个框架结合起来,进行网站的开发.
不同的框架是如何结合在一起呢,这就引出了一个前后端分离的思想,后端只提供接口,api,,前端去调用这些接口,来拿数据,再渲染到html模板上
不同框架进行开发时,最大的问题就是跨域,由于框架不同,他们所启用的端口号是不同的,也就是不同的数据源,由于安全性,所以他们之间是不能直接访问的,解除方法是在django的配置文件中引入跨域许可的中间件,用Django的第三方包django-cors-headers来解决跨域问题
这样的话,我们就可以更方便的通过vue的启动方式来进行调试了
最后怎么整合到一起呢?我们知道django是通过指定模板和静态文件的路径来进行渲染的,所以,我们需要将vue文件打包,生成index主页面和静态文件,这样我们就可以把这两个分别放入django默认的文件夹下,或者重新指定路径就可以了.
结语：以上就是首席CTO笔记为大家介绍的关于django怎么解决跨域的全部内容了，希望对大家有所帮助，如果你还想了解更多这方面的信息，记得收藏关注本站。