Vue项目跨域问题解决

Vue项目跨域问题解决

• 产生缘由
• proxyTable代理跨域

本人目前接触的是基于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