https://segmentfault.com/a/1190000003710973
同源策略
同源指的是域名(或IP),协议,端口都相同,不同源的客户端脚本(javascript、ActionScript)在没明确授权的情况下,不能读写对方的资源。
跨域的判定流程
从zhihu
页面的两次浏览器报错以及segmentfault
的成功返回值来看,可以很容易得出浏览器和服务器的合作判定步骤如下:
浏览器先根据同源策略对前端页面和后台交互地址做匹配,若同源,则直接发送数据请求;若不同源,则发送跨域请求。
服务器解析程序收到浏览器跨域请求后,根据自身配置返回对应文件头。若未配置过任何允许跨域,则文件头里不包含
Access-Control-Allow-origin
字段,若配置过域名,则返回Access-Control-Allow-origin
+对应配置规则里的域名的方式
。浏览器根据接受到的http文件头里的
Access-Control-Allow-origin
字段做匹配,若无该字段,说明不允许跨域;若有该字段,则对字段内容和当前域名做比对,如果同源,则说明可以跨域,浏览器发送该请求;若不同源,则说明该域名不可跨域,不发送请求
(但是不能仅仅根据服务器返回的文件头里是否包含
Access-Control-Allow-origin
来判断其是否允许跨域,因为服务器端配置多域名跨域的时候,也会出现不能跨域的域名返回包里没有
Access-Control-Allow-origin
字段的情况。下文配置说明里会讲。)
添加多域名跨域配置
如果允许跨域的域名有多个但出于安全问题又不想配置全域名通配的时候,就可以用到nginx里的if
判断了。
添加如下内容:
if
(
$http_origin
=
'http://segmentfault.com'
) {
add_header
'Access-Control-Allow-Origin'
"
$http_origin
"
;
}
if
(
$http_origin
=
'http://localhost:4000'
) {
add_header
'Access-Control-Allow-Origin'
"
$http_origin
"
;
}
add_header
'Access-Control-Allow-Methods'
'GET, POST, OPTIONS'
;
- 如果对正则比较熟悉的,可以直接用正则来匹配条件判断,不需要用if这么麻烦的方式。