ajax跨域详细介绍(ajax跨域完全讲解)
ajax跨域详细介绍(ajax跨域完全讲解)创建的script.PNG跨域代理产生跨域原因针对浏览器,修改浏览器安全配置,不过这需要修改每个浏览器,不实际把XHR 请求转为jsonp请求,不过jsonp请求已经越来越不满足当前需求了
内容导读jsonp 不是标准,只是一种约定的协议,使用需要前后端协商一致。jsonp通过动态创建script 然后发送出去(然后自动销毁,如果需要查看创建的script 需要打断点)。普通的ajax请求,请求格式是Type=xhr 返回的格式是json 用jsonp请求,请求格式是Type=script 返回的格式是javascript 返回的值作为javascript函数的参数返回。非简单请求会先发一个预检命令到服务端(OPTIONS) 服务端允许了才发送POST请求,所以是先判断再执行。在nginx中: 把所有请求转发到8080端口。把要调用的服务器地址用8081端口代理。
产生跨域原因
-
浏览器限制
-
跨域(协议、主机名、端口号等不同就属于跨域)
-
XHR(XMLHttpRequest)请求(如果是json请求就不会)
产生跨域原因
解决思路
-
针对浏览器,修改浏览器安全配置,不过这需要修改每个浏览器,不实际
-
把XHR 请求转为jsonp请求,不过jsonp请求已经越来越不满足当前需求了
-
跨域代理
创建的script.PNG
普通请求和jsonp请求区别:
捕获.PNG
解释:
-
普通的ajax请求,请求格式是Type=xhr 返回的格式是json
-
用jsonp请求,请求格式是Type=script 返回的格式是javascript 返回的值作为javascript函数的参数返回。
jsonp弊端
-
服务器需要改动代码支持
-
只支持get请求
-
发送的不是XHR请求(XHR支持异步等)
被调用方解决-支持跨域
在相应头增加字段:可以在
1.服务器
2.nginx
3.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端口代理。 -