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来进行跨域访问。

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

目前常用的响应格式如下：

所以对Djangorestframework响应格式进行改造。该响应的源码在venv/Lib/site-packages/rest_framework/response.py下，我们只需要重写一下response.py。新建一个utils文件夹，创建一个MyResponse类，增加code和msg的返回：

改造视图中的返回，使用我们的自定义格式：

用接口测试工具测试一下，看返回格式是否正确：

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

---