浏览器跨域问题

跨域是指从一个域名的网页去请求另一个域名的资源。

image-20210222075834374

![image-20210222080140365](2020-02-22 03-浏览器跨域问题.assets/image-20210222080140365.png)

常见的跨域方案:
jsonp、 document.domain + iframe 跨域

ors解决方案
添加header头: Access-Control-Allow-Origin ,表明允许网站执行

![image-20210222094932837](2020-02-22 03-浏览器跨域问题.assets/image-20210222094932837.png)

如上图:chrome首次使用域名static.enjoy.com加载html页面——->然后在页面内由ajax方式向域名www.enjoy.com发起请求。

此时问题出现:chrome拒绝执行ajax请求得到的返回值。

此问题常见解决方案:

1、最常用的是,jsonp。此方案需要前后端共同协作来解决。

2、cors跨域,此方式非常优雅,是w3c组织制定的解决方案。为目前主流方案。方案流程如下图:

![image-20210222095324974](2020-02-22 03-浏览器跨域问题.assets/image-20210222095324974.png)

案例:

a、当chrome发现ajax请求的网址,与当前主域名不一致(跨域)时,会在请求header中追加值页面主域名值,即:origin = http://static.enjoy.com

![image-20210222095353971](2020-02-22 03-浏览器跨域问题.assets/image-20210222095353971.png)

b、nginx在接收到ajax请求时,会查看origin值,即请求我的网址是谁?

此处使用正则来校验,即:只要是enjoy.com下的网址,都允许访问我

返回信息时,nginx追加header值:access-control-allow-origin = static.enjoy.com(回答浏览器,static域名网址可以访问我)

![image-20210222095423555](2020-02-22 03-浏览器跨域问题.assets/image-20210222095423555.png)

c、chrome收到ajax返回值后,查看返回的header中access-control-allow-origin的值,发现其中的值是static.enjoy.com,正是当前的页面主域名。这是允许访问,于是执行ajax返回值内容。(ps:若此处access-control-allow-origin不存在,或者值不是static域名,chrome就拒绝执行返回值)

![image-20210222095448767](2020-02-22 03-浏览器跨域问题.assets/image-20210222095448767.png)

CORS 介绍

CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)。

它允许浏览器向跨源服务器,发出XMLHttpRequest请求,

从而克服AJAX只能同源使用的限制。

简单请求

浏览器在跨源AJAX请求的头信息之中,自动在添加一个Origin字段(本次请求来自哪个源 )。

服务器根据这个值,在许可范围内,则在头信息包含 Access-Control-Allow-Origin 。

复杂请求

会在正式通信之前,增加一次HTTP查询请求,称为”预检”请求OPTIONS