同源策略防跨域解决方案

标签：pps   eid   output   origin   响应头   响应   发送   put   site   

跨域

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

同源策略

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

防跨域

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

解决方案

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

同源策略防跨域解决方案

标签：pps   eid   output   origin   响应头   响应   发送   put   site   

原文地址：https://www.cnblogs.com/LTEF/p/9833860.html