跨域问题成因和解决方案

Posted 2021-02-11 laogao123

什么是同源策略？
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

广义跨域：

　　1. 资源跳转： A链接、重定向、表单提交
　　2. 资源嵌入： link script img frame等dom标签，还有样式中background:url()、@font-face()等文件外链
　　3. 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等

常见狭义跨域场景示例：

常见跨域解决方案：

1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域

 详解：

1，JSONP解决：

　　浏览器不限制标签内src的请求跨域，这样就能跟后端跨域界面进行交互，但是局限性很明显，src只能传送get请求，获取到前端返回来字符串格式的数据。

　　不能发送post,因此配合ajax只能发送一些简单的请求

2，添加响应头(简单请求和复杂请求)

简单请求满足：

#HTTP方法是下列方法之一

　　HEAD， GET，POST

#HTTP头信息不超出以下几种字段

　　Accept， Accept-Language， Content-Language， Last-Event-ID

　　Content-Type只能是下列类型中的一个

　　　　application/x-www-from-urlencoded

　　　　multipart/form-data　　　　text/plain

复杂请求

　　先发送预检请求 OPTIONS,判断这个请求是不是复杂请求的唯一标识
　　利用这个功能就能在django中写一个中间件，配置全局的跨域

class MyCors(MiddlewareMixin):
    # 因为后端不存在跨域，所以在响应返回浏览器之前过中间件时进行添加修改响应信息，规避跨域拦截
    def process_response(self, request, response):         # 在返回响应的时候
        response["Access-Control-Allow-Origin"] = "*"      #允许所有页面
        if request.method == "OPTIONS":
            # 复杂请求会先发预检
            response["Access-Control-Allow-Headers"] = "Content-Type"      #添加请求头
            response["Access-Control-Allow-Methods"] = "PUT,PATCH,DELETE"  #添加请求方式
        return response

 

3,，其他的后续再补充