ProxyTable 解决跨域

使用vue-cli脚手架工具开发时，我们在本地启动服务，比如本地开发服务下是 http://localhost:8080 这样的访问页面，但是我们的接口地址是 http://xxxx.com/all/index 这样的接口地址，直接使用必然会出现跨域问题，导致接口请求不成功。

当出现这样的报错，就说明请求跨域了

localhost/:1 Failed to load http://sys.xxxx.com/all/permision: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resourcewith CORS disabled.

• 为什么会跨域:
  因为浏览器同源策略的限制，不是同源的脚本不能操作其他源下面的对象。
   
• 什么是同源策略:
  同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

  简单的来说:协议、域名、端口号三者都相同，则为同源

解决跨域的办法很多，比如jsonp，cors。但是在使用webpack做构建工具的项目使用proxyTable代理实现跨域是一种比较方便的选择。

拿vue-cli举例，我们进入 config/index.js 代码下如下配置：（由于我们是在开发环境下使用，所以要配置在dev里）

dev:{
    env:require('./dev.env'),
    port:8080,
    autoOpenBrowser:true,
    assetsSubDirectory:'stasic',        // 静态资源文件夹
    assetsPublicPath: '/',                // 发布路径
     proxyTable: {
      '/api': {
        target: 'http://xxxxxx.com',     // 请求地址的接口域名
        // secure: false,              // 如果是https接口，需要配置这个参数
        changeOrigin: true,             // 是否跨域，如果接口跨域，需要进行这个参数配置
        pathRewrite: {
          '^/api': ''                  //重写接口
        }
      }，
        cssSourceMap:false
    }
}

加上这行代码就能将本地8080端口的请求代理到了http://xxxxxx.com这一域名下。相当于说直接将以api开头的接口名代理一下换成目标域名访问