Vue项目跨域问题解决

本人目前接触的是基于vue-cli、elementUI的前端项目，在前后端联调时遇到过跨域问题。网上找答案，然后解决问题。这里分享一下我用的方法。

产生原因

跨域产生的原因就是浏览器基于同源策略对跨域访问进行了限制。浏览器限制跨域，但是服务端不限制，因此可以让本地服务端代理跨域访问。

proxyTable代理跨域

在vue的工程目录下的config文件夹中存放着配置文件，其中index.js中提供了proxyTable来设置跨域。

dev: {  //开发环境下

    // 静态资源文件夹
    assetsSubDirectory: 'static',

    // 发布路径
    assetsPublicPath: '/',

    // 代理配置表，在这里可以配置特定的请求代理到对应的API接口
    // 例如将'localhost:8080/api/xxx'代理到'www.example.com/api/xxx'
    proxyTable: {
      '/api': {
        target: 'http://xxxxxx.com', // 接口的域名
        // secure: false,  // 如果是https接口，需要配置这个参数
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        pathRewrite: {
          '^/apis': '/api'  //根据需要可以把 /api 设为 空来保证访问地址正确
        }
      }
    }

https://www.npmjs.com/package/http-proxy-middleware