小编给大家分享一下Javascript如何实现跨域后台设置拦截,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
子域名之间互相访问需要跨域
<强>结论放在开头:强>
1。服务端必须设置允许跨域
2。客户端带饼干需要设置withCredentials
3。无论服务端是否允许跨域,该请求都会完整执行
4。选择预请求需要设置返回空,不然requestMapping没有支持该方法则出错
<强>环境搭建强>
<强>需求强>
首先需要搭建两个环境。一个是提供API的服务器,一个是需要跨域访问API的服务器B .
服务器提供了一个API。完整的请求请求是:
https://local.corstest.com.net: 8443/contentmain/getDepositsRoomAndRatePlanInfo.json ? htid=759, _=1490855801818
服务器B有个页面页:
http://cros.corstest.com.net: 3001/test.html
并且这个页面需要请求服务器的API。
但由于跨域保护,请求失败:
No & # 39; Access-Control-Allow-Origin& # 39;, header is 阐述;提醒,requested 资源只Origin & # 39; xxxxx # 39;, is therefore not allowed 访问。
<强>修改主机强>
首先本地配置两个指向127.0.0.1的主机,方便互相跨域。
127.0.0.1 local.corstest.com.net 127.0.0.1 cros.corstest.com.net
启动项目,方便提供API。
至于项目B,测试跨域只要写个html静态页面即可。那么就写一个test.html,并通过一个工具发布:
,browser-sync
<强>安装强>
npm install -g browser-sync
<强>本地启动一个测试。html 强>
browser-sync start ——server ——files “* .html",——host “cros.corstest.com.net",——port 3001年
<强>关于跨域歌珥强>
ruanyifeng的文章里说浏览器将歌珥请求分成两类:简单请求(简单的请求)和非简单请求(没有这么简单请求)。
其中同时满足一下2种标准即为简单跨域:
1)请求方法是以下三种方法之一:
- <李>
李>负责人李<>
李>得到<李>
文章
李> 2) HTTP的头信息不超出以下几种字段:
- <李>
接受
李> <李>接收语言
李> <李>内容语言
李> <李>Last-Event-ID
李> <李>- type:只限于三个值应用程序/x-www-form-urlencoded,多部分/格式,文本/平原
李>而其他情况,非简单请求是那种对服务器有特殊要求的请求,比如请求方法是,PUT或DELETE,或者- type字段的类型是application/json。非简单请求的歌珥请求,会在正式通信之前,增加一次HTTP查询请求,称为“预检“请求(起飞前的),即选项请求。
<强>关键强>
跨域的关键是浏览器获得服务器的认可,而服务器的认可就是标题里的Access-Control-Allow-Origin。浏览器通过比较服务端返回的反应中是否包含这个字段,以及包含这个字段的内容是否是当前网址来确定是否跨域。也就是说绕过浏览器是可以不用跨域的。
有个问题,看好多文章并没有指出。
第一点,带饼干问题。浏览器设置withCredentials为真则会带饼干发送给服务端。而服务端设置Access-Control-Allow-Credentials为真则接收,错误则不接受。关键是到过滤器里的时候才会决定是否设置的回应,那么这时候饼干已经存在请求里了吧。(待验证)
<强>验证:强>服务器端确实已经接受了cookie,即使设置为false,服务端仍旧接受饼干。而客户端也仍旧可以发送饼干。
第二点,简单跨域中,浏览器的请求直接发送给服务器,服务器返回是否支持跨域(即是否头加起源),那么简单跨域究竟是请求了服务端几次?如果是1次,那么如果服务端不支持跨域,即没有设置允许的话,还会不会继续走下去,会不会继续请求得到结果后放入反应?就是不论跨域不跨域服务器是否都会执行这个请求对应的计算。因为所有的设置头都是给浏览器告知的,和服务端限制无关。(待验证)
<强>验证:强>即使服务端没有设置允许跨域,当客户端请求过来时,服务端仍旧完整执行了请求并返回,只是客户端没有接收。
<>强服务端需要做点工作