跨域的两种简单实现方式

是什么导致了跨域?

是因为浏览器的同源策略是对ajax请求进行阻拦了,但是不是所有的请求都给做跨域,像是一般的href属性,a标签什么的都不拦截。

跨域的原因:比如你在百度工作,但是你需要一些京东的数据,此时就用到了跨域

解决跨域的两种方式:jsonp,cors(跨站资源共享)

简单请求和复杂请求

复制代码
条件:
    1、请求方式:HEAD、GET、POST
    2、请求头信息:
        Accept
        Accept-Language
        Content-Language
        Last-Event-ID
        Content-Type 对应的值是以下三个中的任意一个
                                application/x-www-form-urlencoded
                                multipart/form-data
                                text/plain
 
注意:同时满足以上两个条件时,则是简单请求,否则为复杂请求
区别:
  简单请求:一次请求
  非简单请求:两次请求,在发送数据之前会先发第一次请求做‘预检’,只有‘预检’通过后才再发送一次请求用于数据传输。
预检:先让option预检是否合格,合格才交给响应的视图去处理,不合格直接拦截
复制代码
CORS的优点:可以发任意请求
CORS的缺点:上是复杂请求的时候得先做个预检,再发真实的请求。发了两次请求会有性能上的损耗

jsonp和cors的区别(jsonp在前端处理,即放jspon请求,cors在后端处理)

JSONP:服务端不用修改,需要改前端。发jsonp请求

JSONP:只能发GET请求

CORS:前端的代码不用修改,服务端的代码需要修改。如果是简单请求的话在服务端加上一个响应头。

CORS:可以发任意请求

预检这里的工作其实可以交给中间件去完成,否则需要写太多的重复代码

 

class RequestMiddleware(MiddlewareMixin):
    def process_request(self, request):
        request.META["Access-Control-Allow-Origin"] = "*"
        # 中间件配置,允许所有的请求头过来
print("=======中间件操作=========》")
复制代码
jsonp请求实例
$.ajax({
              type: "get",
              async:false,
              url: "http://192.168.1.102:8080/carop/jsonp",
              dataType: "jsonp",
              jsonpCallback:"jsonpCallback",              
              success: function(data){
              alert(data.name+"\n "+data.tel);
              }
          }); 

JSONP实现跨域请求的原理简单的说,就是动态创建<script>标签,然后利用<script>的src 不受同源策略约束来跨域获取数据。


JSONP 由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。

 
复制代码

 同源策略对照表

简单的说,不同姓的人,互相只能通过接口访问,不能查看对方的私有信息比如你雇三个人帮你装修,你们的交互也只能限于你告诉他做什么,他帮你工作,但不能互相打探老婆漂不漂亮

 

posted @   一石数字欠我15w!!!  阅读(512)  评论(0编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
点击右上角即可分享
微信分享提示