vue-cli项目中的跨域问题

vue-cli项目中的跨域问题

一、开发环境中的跨域

vue-cli创建的项目中，前端开发测试中，常会遇到跨域的问题。跨域通常都需要后台配置，不过前端也可以处理，可以直接利用 Node.js 代理服务器，通过修改 proxyTable 实现跨域请求

在config文件夹下的index.js配置中

  dev: {

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

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

    // 代理配置表，在这里可以配置特定的请求代理到对应的API接口
    // 例如将'localhost:8080/api/xxx'代理到'www.baidu.com/api/xxx'
    proxyTable: {
      // 这里是配置 接口只要是'/api'开头的才用代理
      '/api': {
        target: 'http://xxxxxx.com', // 接口的域名
        // secure: false,  // 如果是https接口，需要配置这个参数
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置，为true的话，请求的header将会设置为匹配目标服务器的规则（Access-Control-Allow-Origin）
        pathRewrite: {
          '^/api': '' //本身的接口地址没有 '/api' 这种通用前缀，所以要pathRewrite重置，如果本身有则不需要配置 pathRewrite
        }
      }
    },

设置完成一定要重启 npm run dev

changeOrigin如果设置为true，那么本地会虚拟一个服务端转发你的请求，这样就不会有跨域问题了。这只适用于开发环境。vue-cli的这个设置来自于其使用的插件http-proxy-middleware。