浏览器跨域问题分析

Posted windcat

tags:

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

浏览器的同源策略:协议相同域名相同端口相同。所有浏览器厂商遵循这种策略。

非同源(跨域)共有三种行为受到限制:

  1. cookie、localstorage、和IndexDB无法获取
  2. DOM无法获取
  3. ATAX请求不能发送

这种同源性会有效的阻止CSRF(跨站请求)攻击。

浏览器请求分为两种:(CORS请求)

  1. 简单请求:只要满足一下方式中的两种,视为简单
  • 请求方式是GET、POST、HEAD
  • HTTP请求头不超过如下字段:   ACCEPT、ACCEPT-LANGUAGE、Last-Event-ID、Content-langage、content-type
  • 请求中的任意XHR对象均没有注册事件反射器
  • XHR对象可以使用XHR.upload属性访问,请求中没有使用ReadableStream对象

    对于简单请求浏览器会直接发送请求,服务器返回响应给浏览器,并在响应体中携带相关信息供浏览器判断是否跨站

  2. 非简单请求

    例如PUT、DELETE、CONTENT-TYPE:aplication/Json

    非简单请求会在正式通信之前,使用options方法发起一个预检请求到服务器,浏览器先询问服务器当前网页所在的域名是否在服务器的许可名单中,以及可以使用那些HTTP方法和头信息字段,只有得到肯定答复,浏览器才会发出正式的XHR请求,否则报错。

 

跨域手段

  1. AJAX请求跨域

    由浏览器和服务器根据HTTP头域或Access-control开头相关字段协商处理

  2. JSONP跨域

    利用script或img等标签能够跨域加载来实现,浏览器通过GET方法加载这些标签(业务对于一些重要的请求,不能够使用get方法提交数据,必须使用post方法,这样就无法利用JSONP进行跨域请求)

  3. 服务器转发

 

以上是关于浏览器跨域问题分析的主要内容,如果未能解决你的问题,请参考以下文章

ajax跨域 (转)

如何解决跨域问题

如何解决跨域问题

怎样避免跨域发出OPTIONS请求?

20K前端大神面试如何回答ajax跨域问题!

关于vue项目请求WCF服务跨域的问题(后台设置)