前端解决跨域方案

一、什么是跨域？

含义：浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对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）攻击。顾名思义，攻击者会伪造客户端的请求对服务器进行攻击。（请参看：blogs.msdn.microsoft.com/ieinternals…

2、proxy代理

Vue CLI 2.x写法：

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

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

proxyTable: {      
    '/dailiming': { //定义的代理名        
            target: 'XXX', //目标接口地址
            secure: true, //如果是 https ,需要开启这个选项  
            changeOrigin: true,//是否允许跨越        
            pathRewrite: {          
                '^/dailiming': ''        
            }      
     }    
}

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

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

Vue CLI 3.x写法：

devServer: {
    host: 'localhost', //target host
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://172.16.30.234:8050', //代理地址，这里设置的地址会代替axios中设置的baseURL
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        pathRewrite: {
          '^/api': ''
        }
      } }
  },

proxy代理原理：

在开发模式下,webpack 会为我们提供一个http代理服务器.
我们请求接口的时候,实际上是请求的webpack提供的这个http代理服务器.
在由这个代理服务器请求真是的数据服务器.
最后数据经由webpack代理服务器,最后转交给我们的vue程序.

代理服务器不是浏览器,它没有同源策略的限制

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