Django之跨域请求同源策略

Posted 2021-01-23 lvye001

同源策略：

首先基于安全的原因，浏览器是存在同源策略这个机制的，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。

而如果我们要跳过这个策略，也就是说非要跨域请求，那么就需要通过JSONP或者CORS来实现了。

 

一个源的定义

 

如果两个页面的协议，端口（如果有指定）和域名都相同，则两个页面具有相同的源。

 

举个例子：

 

下表给出了相对http://a.xyz.com/dir/page.html同源检测的示例: 

 

 

URL	结果	原因
http://a.xyz.com/dir2/other.html	成功
http://a.xyz.com/dir/inner/another.html	成功
https://a.xyz.com/secure.html	失败	不同协议 ( https和http )
http://a.xyz.com:81/dir/etc.html	失败	不同端口 ( 81和80)
http://a.opq.com/dir/other.html	失败	不同域名 ( xyz和opq)

 

 

JSONP

什么是JSONP

首先提一下JSON这个概念，JSON是一种轻量级的数据传输格式，被广泛应用于当前Web应用中。JSON格式数据的编码和解析基本在所有主流语言中都被实现，所以现在大部分前后端分离的架构都以JSON格式进行数据的传输。

合格的json对象：

["one", "two", "three"]
{ "one": 1, "two": 2, "three": 3 }
{"names": ["张三", "李四"] }
[ { "name": "张三"}, {"name": "李四"} ]　

 不合格的json对象：

{ name: "张三", ‘age‘: 32 }  // 属性名必须使用双引号
[32, 64, 128, 0xFFF] // 不能使用十六进制值
{ "name": "张三", "age": undefined }  // 不能使用undefined
{ "name": "张三",
  "birthday": new Date(‘Fri, 26 Aug 2011 07:13:10 GMT‘),
  "getName":  function() {return this.name;}  // 不能使用函数和日期对象
}

stringify与parse方法

javascript中关于JSON对象和字符串转换的两个方法：

JSON.parse(): 用于将一个 JSON 字符串转换为 JavaScript 对象　

JSON.parse(‘{"name":"Q1mi"}‘);
JSON.parse(‘{name:"Q1mi"}‘) ;   // 错误
JSON.parse(‘[18,undefined]‘) ;   // 错误

JSON.stringify(): 用于将 JavaScript 值转换为 JSON 字符串。　

JSON.stringify({"name":"Q1mi"})

 

那么JSONP是什么呢？ 

首先抛出浏览器同源策略这个概念，为了保证用户访问的安全，现代浏览器使用了同源策略，即不允许访问非同源的页面，详细的概念大家可以自行百度。这里大家只要知道，在ajax中，不允许请求非同源的URL就可以了，比如www.a.com下的一个页面，其中的ajax请求是不允许访问www.b.com/c.php这样一个页面的。

JSONP就是用来解决跨域请求问题的，那么具体是怎么实现的呢？

JSONP原理

ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。

JSONP具体实现:

前端：

后台：

总结：

一句话就是利用script标签绕过同源策略，获得一个类似这样的数据。

ajax里边的callbacks本质上是（伪装成script标签src属性发送请求的方式）发送一个回调方法，参数data就是想得到的json数据。

 

---

 

CORS 定义

Cross-Origin Resource Sharing（CORS）跨来源资源共享是一份浏览器技术的规范，提供了 Web 服务从不同域传来沙盒脚本的方法，以避开浏览器的同源策略，是 JSONP 模式的现代版。与 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。另一方面，JSONP 可以在不支持 CORS 的老旧浏览器上运作。现代的浏览器都支持 CORS。

CORS 对比 JSONP

都能解决 Ajax直接请求普通文件存在跨域无权限访问的问题

1. JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求
2. 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理
3. JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS

CORS的实现

CORS有很多种实现方式，这里介绍一种最简单最直观的的方式，就是修改views.py中对应函数，给它的响应头部添加Access-Control-Allow-Origin餐具允许其他域通过Ajax请求数据，如下：

前端：

注：上面图片中数据传输过来为none(   ),利用Jaon.parse()进行转对象 提取data 数据

后台：

注：response["Access-Control-Allow-Origin"]="http://127.0.0.1:8006" #指定ip可访问，‘*’ 为所有ip均可