Intern Day46 - 如何解决跨域问题

什么是跨域

跨域的概念：当一个请求URL的协议、域名、端口三者间任意一个与当前页面的URL不同即为跨域。

http://www.test.com:8080/abcdefg

http协议、www子域名、test.com域名、8080端口（默认80
）、abcdefg资源文件

比如：

undefined

跨域问题：跨域指的是浏览器不能执行其他网站的脚本。是由浏览器的同源策略造成的。

什么是同源策略

同源是指：“协议+域名+端口”三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

是不是不是浏览器就没有这个问题？对的，跨域只发生在浏览器。

但是HTML特殊标签，比如<link>、<img>等这种标签是可以跨域的，具有跨域特性，可以直接访问，并不会报错。

同源策略目的：是浏览器最核心最基本的安全功能，如果缺少了同源策略浏览器很容易受到XSS、CSFR等攻击。保证用户信息安全，防止恶意网站窃取数据。同源策略是必须的，否则cookie可以共享。

跨域的解决方案

1. Proxy代理（用的最多）：通过中间件来实现，浏览器有跨域限制，但是服务器没有跨域限制，所以中间件其实就是服务器（服务器多数据进行了转发而已）

   • 原理图

     
     undefined

2. Jsonp：利用script标签，远程动态加载js代码

3. CORS（服务器端解决）

4. Ngnix反向代理

5. Websocket

6. postMessage

参考

https://www.bilibili.com/video/BV1pA411u7Ji