Javascript如何实现跨域后台设置拦截

  

小编给大家分享一下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次,那么如果服务端不支持跨域,即没有设置允许的话,还会不会继续走下去,会不会继续请求得到结果后放入反应?就是不论跨域不跨域服务器是否都会执行这个请求对应的计算。因为所有的设置头都是给浏览器告知的,和服务端限制无关。(待验证)

<强>验证:即使服务端没有设置允许跨域,当客户端请求过来时,服务端仍旧完整执行了请求并返回,只是客户端没有接收。

<>强服务端需要做点工作

Javascript如何实现跨域后台设置拦截