django怎么解决跨域?

发布网友 发布时间：2024-09-25 18:47

我来回答

共1个回答

热心网友 时间：2024-10-19 04:34

导读：很多朋友问到关于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属性。

//父窗口打开一个子窗口

??varopenWindow=window.open('','title');

//父窗口向子窗口发消息(第一个参数代表发送的内容，第二个参数代表接收消息窗口的url)

??openWindow.postMessage('Nicetomeetyou!','');

调用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端口

??listen9099;

??#域名是localhost

??server_namelocalhost;

??#凡是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'

?})

})

后端开发环境：Django3.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后成功解决问题。

跨域问题来源于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是JSONwithPadding的略称。它是一个非官方的协议，它允许在服务器端集成Scripttags返回至客户端，通过javascriptcallback的形式实现跨域访问（这仅仅是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来进行跨域访问。

如此，我们的跨域处理即完成，支持所有的请求。