跨域

跨域

1. 什么是跨域？

当前页面中的某个接口请求的地址和当前页面的地址如果协议、域名、端口其中有一项不同，就说该接口跨域了

2. 为什么有跨域？

浏览器为了保证网页的安全，出的同源协议策略

3. 跨域报错

4. 跨域解决办法

4.1 cors

目前最常用的一种解决办法，通过设置后端

​ res.setHeader('Access-Control-Allow-Origin', '*');

​ res.setHeader("Access-Control-Allow-Methods", "GET, PUT, OPTIONS, POST");

​

4.2 jsonp

利用的原理是script标签可以跨域请求资源，将回调函数作为参数拼接在url中

​ 后端收到请求，调用该回调函数，并将数据作为参数返回去，注意设置响应头返回文档类型，应该设置成javascript

4.3 postmessage

​ 场景：一个页面中嵌入另一个iframe页面，

​ 使用postmessage发送数据

​ window.addEventListener("message", function (event) {

​ console.log('这里是接收到来自父页面的消息，消息内容在event.data属性中', event)

​ }, false)

4.4 其他方法：node中间件、nginx反向代理、websocket等

主要是因为同源策略是浏览器的限制，服务器和服务器之间没有限制