跨域(协议、主机名、端口号平分歧就属于跨域)

XHR(XMLHttpRequest)要求(如果是json要求就不会)

产生跨域缘故原由

ajax跨域jspajax跨域完整讲授 Webpack

办理思路

针对浏览器,修正浏览器安全配置,不过这须要修正每个浏览器,不实际

把XHR 要求转为jsonp要求,不过jsonp要求已经越来越不知足当前需求了

跨域代理

办理思路

办理方法jsonp办理

jsonp 不是标准,只是一种约定的协议,利用须要前后端协商同等。
jsonp通过动态创建script,然后发送出去(然后自动销毁,如果须要查看创建的script,须要打断点)。

创建的script如下图:

创建的script.PNG

普通要乞降jsonp要求差异:

捕获.PNG

阐明:

普通的ajax要求,要求格式是Type=xhr,返回的格式是json

用jsonp要求,要求格式是Type=script ,返回的格式是javascript,返回的值作为javascript函数的参数返回。

jsonp弊端

做事器须要改动代码支持

只支持get要求

发送的不是XHR要求(XHR支持异步等)

被调用方办理-支持跨域

在相应头增加字段:可以在1.做事器2.nginx3.apache这三者之一增加

Filter办理方法

浏览器是先实行再判断

跨域要求返回值多了origin字段

办理方法:在做事端:

个中8081端口是client端口

大略要乞降非大略要求

大略要求:先实行再判断;非大略要求:先判断在实行;

大略要求定义(知足以下几点即为大略要求):

方法:

GET

HEAD

POST

要求header里面:

text/plain

multipart/form-data

application/x-www-form-urlencoded

无自定义头

Content-type为一下几种:

非大略要求:

put

delete

发送json格式的ajax要求

带自定义头的ajax要求

非大略要求.PNG

非大略要求会先发一个预检命令到做事端(OPTIONS),做事端许可了才发送POST要求,所以是先判断再实行。

缓存预检命令:在做事端设置缓存预检命令后:

缓存.PNG

浏览器缓存后,浏览器不须要再次发送预检命令。

带cookie的跨域

Access-Control-Allow-Origin字段不能为

增加Access-Control-Allow-Credentials值为true的字段

多站点带cookie跨域办理方法:

在做事端通过origin字段得到要求端域名,然后增加到 Access-Control-Allow-Origin字段中

带自定义头跨域

自定义头跨域.PNG

然后在做事端增加自定义头(写去世):

做事端自定义头.PNG

或者在做事端获取要求头,然后加入进去(推举)

被调用方办理跨域:nginx被调用方办理跨域:apache调用方办理跨域(隐蔽跨域)

反向代理

在nginx中:把所有要求转发到8080端口。
把要调用的做事器地址用8081端口代理。