前端解决跨域方案

一、什么是跨域？

含义：浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

问题：什么是同源策略？

答：指协议，域名，端口都要相同，其中有一个不同都会产生跨域。

二、解决跨域方法

1、CORS（跨域资源共享）

先说解决方法，再说原理。

解决方法：

我们需要在main.js中添加axios.defaults.withCredentials = true

withCredentials:默认情况下，跨源请求不提供凭据(cookie、HTTP认证及客户端SSL证明等)。通过将withCredentials属性设置为true，可以指定某个请求应该发送凭据。

当配置了withCredentials = true时，必须在后端增加 response 头信息Access-Control-Allow-Origin，且必须指定域名，而不能指定为*！！！

这个方式解决的跨越问题支持开发和生产环境。但是有一定的安全性问题。

如果服务器不检查请求的来源会有什么安全问题呢？典型就是CSRF(Cross SiteRequest Forgery）攻击。顾名思义，攻击者会伪造客户端的请求对服务器进行攻击。（请参看：https://blogs.msdn.microsoft.com/ieinternals/2012/04/02/same-origin-policy-part-2-limited-write/）一个常见的例子是，我们使用电商网站购物时（如在亚马逊），我们的账户认证信息以及我们浏览商品的记录信息会存储在客户端（cookies），当我们点击某个商品详情时，会向电商的服务器发出HTTP请求，同时存储在浏览器的认证信息也会发送到服务器用于验证用户身份。服务器验证了你的身份后，会记录你当前访问的页面的信息，方便日后为你推荐一些商品。当你使用浏览器时，攻击者可能会诱导你点击某个站点的链接（如论坛中的某条评论），而这个链接的隐藏页面的后台会向你经常访问的电商网站发送一个HTTP请求（比如请求一个手机商品详情页面），由于你的账号信息记录在浏览器中，所以这次请求可以成功，而服务器也会相应记下你访问过这个页面。随后你浏览电商网站时，就可能看到那个手机商品的推荐，尽管你从未访问过那个商品。

2、proxy代理

操作步骤：vue-cli脚手架搭建的项目存在*.config.js文件

只需要修改Dev中ProxyTable配置，新增如下代码：

proxyTable: {      
    '/dailiming': { //定义的代理名        
            target: 'XXX', //接口地址        
            changeOrigin: true,//是否允许跨越        
            pathRewrite: {          
                '^/dailiming': ''        
            }      
     }    
}

'/dailiming': {}, 就是告诉node, 我接口只要是'/dailiming'开头的才用代理.所以你的接口就要这么写 /dailiming/xx/xx. 最后代理的路径就是 http://xxx.xx.com/dailiming/xx/xx。

可是不对啊, 我正确的接口路径里面没有/dailiming啊. 所以就需要 pathRewrite，用''^/dailiming'':'', 把'/dailiming'去掉, 这样既能有正确标识, 又能在请求接口的时候去掉dailiming。

注意这个方式只能在开发环境中使用。