跨域问题解决方案

https://www.cnblogs.com/morethink/p/6525216.html

常用解决方案好文：https://blog.youkuaiyun.com/xiaozhu_dq/article/details/82423618

跨域的根源

源于浏览器的同源策略，跨域其实就是前端请求，域名、协议、端口，只要其中之一不同，就会有跨域限制。

下面这段引用其他博主的文章

http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域）

http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）

http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）

http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）

http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域）
————————————————
版权声明：本文为优快云博主「gang456789」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/gang456789/article/details/78202778

 

解决跨域

1.jsonp

首先说下jsonp的原理。

有注意到标签属性src=“”，里面的地址不需要跨域吗，jsonp其实就是通过建立<script src="">标签，把需要跨域的url填进去，就可以访问到后端，因为这种形式最后是拿到一个js文件的，所以后端也需要对返回数据以特殊格式封装。

ps：由于src=""链接的方式归根到底是get请求，所以jsonp只能解决get请求的跨域问题。

下面是演进实现例子

ajax的形式

 

2.后端

@CrossOrigin(origins = "http://www.zhihu.com")

或者 response.setHeader("Access-Control-Allow-Origin", "*")

 

3.iframe之间交互，postMessage跨域

window.postMessage(一次只能传输255字符串)

 

 

4.设置document.domain