为什么会出现跨域问题

出于安全原因,浏览器制订了同源策略

同源的定义

如果两个 URL 的 protocol、port (如果有指定的话)和 host 都相同的话,则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”,或者直接是 “元组”。

URL 结果 原因
http://store.company.com/dir2/other.html 同源 只有路径不同
http://store.company.com/dir/inner/another.html 同源 只有路径不同
https://store.company.com/secure.html 失败 协议不同
http://store.company.com:81/dir/etc.html 失败 端口不同 ( http:// 默认端口是80)
http://news.company.com/dir/other.html 失败 主机不同

什么时候会触发跨域

同源策略控制不同源之间的交互,例如在使用XMLHttpRequest 或 标签时则会受到同源策略的约束。这些交互通常分为三类:

跨域写操作(Cross-origin writes)一般是被允许的。例如链接(links),重定向以及表单提交。特定少数的HTTP请求需要添加 preflight。

跨域资源嵌入(Cross-origin embedding)一般是被允许,比如 script脚本,link嵌入,img嵌入

跨域读操作(Cross-origin reads)一般是不被允许的,但常可以通过内嵌资源来巧妙的进行读取访问。例如,你可以读取嵌入图片的高度和宽度,调用内嵌脚本的方法,或availability of an embedded resource.

解决方案

jsonp和cors

目前jsonp方案用的越来越少了,更多的是使用cors方案

CORS跨域

浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(预检请求)(not-so-simple request)

简单请求

什么是简单请求

  1. 请求方法是以下三种方法之一:

    HEAD GET POST

  2. HTTP请求头信息不超出以下几种字段:

    Accept

    Accept-Language

    Content-Language

    Last-Event-ID

    Content-Type: 只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

处理流程

Access-Control-Allow-Origin

必须字段,要么是请求时origin字段,要么返回 *

Access-Control-Expose-Headers

可选字段,CORS请求时,XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段,就必须在Access-Control-Expose-Headers里面指定

Access-Control-Allow-Credentials

可选字段,CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器,一方面要服务器同意,指定Access-Control-Allow-Credentials字段,另一方面,ajax里也需要设置withCredentials

预检请求

非简单请求会在正式通讯前增加一次option请求,以确认当前跨域请求是否被服务器接受

处理流程

Access-Control-Allow-Methods

该字段必需,它的值是逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法。注意,返回的是所有支持的方法,而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求

Access-Control-Allow-Headers

如果浏览器请求包括Access-Control-Request-Headers字段,则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串,表明服务器支持的所有头信息字段,不限于浏览器在"预检"中请求的字段

Access-Control-Max-Age

该字段可选,用来指定本次预检请求的有效期,单位为秒。上面结果中,有效期是20天(1728000秒),即允许缓存该条回应1728000秒(即20天),在此期间,不用发出另一条预检请求

参考资料

浏览器的同源策略

彻底理解CORS跨域原理 - 喵小Q - 博客园