跨域问题成因和解决方案

Posted laogao123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了跨域问题成因和解决方案相关的知识,希望对你有一定的参考价值。

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

以上是关于跨域问题成因和解决方案的主要内容,如果未能解决你的问题,请参考以下文章

黏包问题的成因与解决方案

跨域访问方法介绍--使用片段识别符传值

XSS

请教高手。蓝屏问题。

广播风暴的成因以及解决办法有哪些?

黏包-黏包的成因解决方式及struct模块初识文件的上传和下载