解决跨域常用的方法

153 阅读1分钟

跨域问题其实就是浏览器的同源策略造成的

同源指的是:协议端口号域名必须一致

同源政策主要限制了三个方面:

  • 当前域下的 js 脚本不能够访问其他域下的cookie和localStorage
  • 当前域下的 js 脚本不能够操作访问其他域下的 DOM
  • 当前域下 ajax 无法发送跨域请求
如何解决跨域问题

一、CORS(携带cookie)

CORS的意思就是 跨域资源共享,一般是由后端来开启,只要服务器实现了CORS请求,就可以跨源通信了

  • 前端请求时在request对象中配置"withCredentials": true

  • 服务端在responseheader中配置"Access-Control-Allow-Origin", "http://xxx:${port}"

  • 服务端在responseheader中配置"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请求方法