浏览器同源策略导致的跨域问题分析

1. 何为跨域？

记住一点：
只要域名（ip），协议(http和https)，端口其中任何一个不相同，都是跨域请求。

2. 为什么需要跨域

因为存在浏览器同源策略，所以才会有跨域问题。那么浏览器是出于何种原因会有跨域的限制呢。其实不难想到，跨域限制主要的目的就是为了用户的上网安全。

如果浏览器没有同源策略，会存在什么样的安全问题呢。下面从 DOM 同源策略和 XMLHttpRequest 同源策略来举例说明：

如果没有 DOM 同源策略，也就是说不同域的 iframe 之间可以相互访问，那么黑客可以这样进行攻击：

1. 做一个假网站，里面用 iframe 嵌套一个银行网站 http://mybank.com。
2. 把 iframe 宽高啥的调整到页面全部，这样用户进来除了域名，别的部分和银行的网站没有任何差别。
3. 这时如果用户输入账号密码，我们的主网站可以跨域访问到 http://mybank.com 的 dom 节点，就可以拿到用户的账户密码了。

如果 XMLHttpRequest 同源策略，那么黑客可以进行 CSRF（跨站请求伪造） 攻击：

1. 用户登录了自己的银行页面 http://mybank.com，http://mybank.com 向用户的 cookie 中添加用户标识。
2. 用户浏览了恶意页面 http://evil.com，执行了页面中的恶意 AJAX 请求代码。
3. http://evil.com 向 http://mybank.com 发起 AJAX HTTP 请求，请求会默认把 http://mybank.com 对应 cookie 也同时发送过去。
4. 银行页面从发送的 cookie 中提取用户标识，验证用户无误，response 中返回请求数据。此时数据就泄露了。
5. 而且由于 Ajax 在后台执行，用户无法感知这一过程。

因此，有了浏览器同源策略，我们才能更安全的上网。

3. 是不是只有浏览器存在同源策略

是的。假如你在后端的代码中去请求另一台服务器的接口时，就不存在同源策略，因为同源策略只针对浏览器。

前端请求后端接口需要解决两个问题：

1. 服务器支持跨域
2. 解决浏览器的同源策略限制

服务器请求另一台服务器接口只需要解决一个问题：

1. 被请求的服务器支持跨域

4. 怎么解决浏览器同源策略的限制

在这里我只说两个，一个是JSONP，十分经典，早期解决跨域问题的办法。第二个是vue项目中开发环境的proxytable和生产环境的nginx正向代理

1. JSONP(利用img，script标签的src属性是不受同源策略的限制。原理是将callback函数写进url，服务端接受参数，执行回调)
   文章参考：https://www.cnblogs.com/soyxiaobi/p/9616011.html
2. 正向代理

开发环境：proxyTable(vue.config.js)

proxyTable: {
      '/api': { //代理的目的：只要是/api开头的路径都往47.xx.xx.91:8848进行转发
        target: 'http://47.xx.xx.91:8848',   //设置代理服务器地址
        changeOrigin: true,
      }
    },

生产环境：nginx(nginx.conf)

     server {
              listen 3001;
              server_name 47.xx.xx.57;

       location / {
           root   /home/dist/; 
           try_files $uri $uri/ /index.html;
       }
        location /api {
            proxy_pass http://121.xx.xx.234:8848/api;
        }
      }

5. 正向代理流程：

1. 我要访问的真实地址： 47.21.76.91:8848/api/book/list
2. proxyTable配置如上
3. 发起请求this.axios.post(‘api/book/list’)
4. 这时我们浏览器显示的地址就是：localhost:8080/api/book/list
5. 而实际上调用的却是真实的地址

不管是开发环境的proxyTable还是nginx的正向代理。不仅解决了跨域的问题，而且还有效避免了服务器地址被暴露。