知行合一
Choose a quality life!

什么是同源策略?
同源策略/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,,其他的后续再补充

posted on 2019-03-01 11:53  小米没吃饭  阅读(288)  评论(0编辑  收藏  举报