跨域
由于同源策略导致的不同源网站间页面脚本无法互相访问。
同源策略
出于安全性考虑,一个网站的脚本不能访问另一个网站的请求。除非它们的协议号,域名,端口号相同。
防跨域
同源策略条件过于严苛,很多网站都有子域名,这样就造成了互相通信不便的问题。
解决方案
一.document.domain
document.domain只能实现一级域名相同的防跨域。
如:www.sojson.com 下指到sojson.com 是可以的。
icp.sojson.com 下指到 sojson.com 是可以的。
www.sojson.com 下指到 www.baidu.com 是不行的。
sojson.com 指到 baidu.com 还是不行的。
实例
1.需求:
比如我们要在当前页面下,“www.sojson.com/shiro” 下上传图片到 "cdn.sojson.com/images/" 下去。直接搞肯定是不行的。
2.在请求“www.sojson.com/shiro” 的时候,写上如下代码:
if(document.domain !=‘sojson.com‘){
document.domain = ‘sojson.com‘;
}
3.然后在上传的地址“cdn.sojson.com” 的Iframe 文件内写上一样的代码。
if(document.domain !=‘sojson.com‘){
document.domain = ‘sojson.com‘;
}
二.jsonp
jsonp是利用script标签没有同源策略限制的属性实现的。jsonp只能发送GET请求。
客户端:
$.ajax({
url: "http://otherdomain.com/manage/role/get",
async: false,
type: "get",
dataType: "jsonp",
data:{
"id":1
},
jsonp: "callback",
jsonpCallback:"fn",
success: function(data){
alert(data.code);
},
error: function(){
alert(‘fail‘);
}
})
服务端:
return HttpResponse("fn(outputData)")
注意内容:
1、Ajax请求需要设置请求类型为Jsonp
dataType: "jsonp"
2、Ajax请求需要设置回调函数,当前函数值必须与服务器响应包含的callback名称相同
jsonpCallback:"fn"
3、Ajax请求可以设置jsonp(可选),传递给请求处理程序或页面,用以获得jsonp回调函数名的参数名,默认为:callback
jsonp: "callback"
4、服务端返回Json数据必须使用jsonpCallback设置的值进行包裹
return HttpResponse("fn(outputData)")
三.CORS
cors只设置服务端允许白名单网站访问即可。
# 服务器添加响应头headers
Access-Control-Allow-Origin: http://a.com
补充:django-cors-headers
安装
pip install django-cors-headers
添加应用
INSTALLED_APPS = (
...
‘corsheaders‘,
...
)
中间层设置
MIDDLEWARE = [
// 必须在最前面 只有允许跨域请求,后面的中间件才能被执行
‘corsheaders.middleware.CorsMiddleware‘,
...
]
添加白名单
# CORS
CORS_ORIGIN_WHITELIST = (
‘127.0.0.1:8080‘,
‘localhost:8080‘,
‘www.meiduo.site:8080‘,
‘api.meiduo.site:8000‘
)
CORS_ALLOW_CREDENTIALS = True # 允许携带cookie
原文地址:https://www.cnblogs.com/LTEF/p/9833860.html