跨域问题其实就是浏览器的同源策略造成的
同源指的是:协议、端口号、域名必须一致
同源政策主要限制了三个方面:
- 当前域下的 js 脚本不能够访问其他域下的cookie和localStorage
- 当前域下的 js 脚本不能够操作访问其他域下的 DOM
- 当前域下 ajax 无法发送跨域请求
如何解决跨域问题
一、CORS(携带cookie)
CORS的意思就是 跨域资源共享,一般是由后端来开启,只要服务器实现了CORS请求,就可以跨源通信了
-
前端请求时在
request对象中配置"withCredentials": true -
服务端在
response的header中配置"Access-Control-Allow-Origin", "http://xxx:${port}" -
服务端在
response的header中配置"Access-Control-Allow-Credentials", "true"
二、JSONP
上面所说的同源策略,其实还有这三个标签
加载资源路径是不受跨域问题所束缚
- 1、script标签:
<script src="加载资源路径"></script> - 2、link标签:
<link herf="加载资源路径"></link> - 3、img标签:
<img src="加载资源路径"></img>
而JSONP就是利用script的src去发送请求,将一个方法名callback传给后端,后端拿到这个方法名,将所需数据通过字符串拼接成新的字符串callback(所需数据),并发送到前端接受到这个字符串之后,就会自动执行方法callback(所需数据)。另外JSONP需要前后端配合,并且只支持get请求方法