产生跨域原因
- 浏览器限制
- 跨域（协议、主机名、端口号等不同就属于跨域）
-
XHR（XMLHttpRequest）请求（如果是json请求就不会）
产生跨域原因
解决思路
- 针对浏览器，修改浏览器安全配置，不过这需要修改每个浏览器，不实际
- 把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.nginx
3.apache
这三者之一增加
Filter解决方法
- 浏览器是先执行再判断
- 跨域请求返回值多了origin字段
解决方法：
在服务端：
其中8081端口是client端口
简单请求和非简单请求
简单请求：先执行再判断；
非简单请求：先判断在执行；
简单请求定义(满足以下几点即为简单请求）：
- 方法：
- GET
- HEAD
- POST
- 请求header里面：
- 无自定义头
- Content-type为一下几种：
- text/plain
- multipart/form-data
- application/x-www-form-urlencoded
非简单请求：
- 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端口代理。
网友评论