- 为什么会出现跨域?
a. 浏览器限制
b. 跨域
c. XHR(XMLHttpRequest)请求 - 解决方法
a. 浏览器禁止检查(校验);跨域是浏览器做的校验,后台请求是正常的
新打开浏览器,并输入参数设置:chrome --disable-web-security --user-dir =g:\temp
b. JSONP解决跨域: 通过动态创建script
jsonp请求的content-type跟普通的ajax不一样,type为javascript,普通的ajax为xhr;前后台约定参数,发送请求时url会带上该参数,后台在解析时会把返回的数据改成由json变成javascript
/JSONP弊端/
#. 服务器需要改动代码支持
#. 只支持GET请求
#. 发送的不是XHR请求 - 常用优化解决方案
#服务器端实现
#NGINX配置
#APACHE配置
a. 调用方修改 --支持跨域
隐藏跨域,NGINX/APACHE配置反向代理
浏览器对请求是先执行还是先判断?如何判断?
简单请求: 请求的方法为GET, HEAD, POST; 请求头里面无自定义头, content-type为: text/plain; multipart/form-data; application/x-www-form-urlencoded
工作中常见非简单请求: delete,put方法的ajax
请求;发送json格式的ajax请求; 带自定义头的ajax请求
(非简单请求在请求发送时会有options预检命令,预检通过时才会发送真正的请求;可缓存预检命令Access-Control-Max-Age: 3600;在一个小时内可缓存
跨域请求的请求头会有Origin字段,值是域名信息; 等请求返回来会检查响应头有没有跨域信息,如果没有就会报错
在响应头增加字段,告诉浏览器允许跨域,在filter增加字段,也可以在其他地方增加Access-Control-Allow-Origin; Access-ControlC-Allow-Methods
带cookie的请求跨域
在请求中设置xhrFiled: {withCredentials: true},发送请求时会带上cookie
origin需要全匹配,Access-Control-Allow-Origin不能设置为*
带自定义请求头的跨域
b. 被调用方修改
NGINX配置解决方案
APACHE配置