同源策略防跨域解决方案

Posted 2021-01-14 ltef

跨域

由于同源策略导致的不同源网站间页面脚本无法互相访问。

同源策略

出于安全性考虑，一个网站的脚本不能访问另一个网站的请求。除非它们的协议号，域名，端口号相同。

防跨域

同源策略条件过于严苛，很多网站都有子域名，这样就造成了互相通信不便的问题。

解决方案

一.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