Vue-cli (webpack) 配置 proxyTable 处理Rap API跨域问题

前后端分离开发中，前端的Mock server采用RAP（taobao）搭建的；正式环境中代码是部署到一台机器上或者加下反向代理就ok了；但本地的开发环境中，node运行的server与rap所在的server存在跨域问题，首先想到的是加跨域头：Access-Control-Allow-Origin; 这需要去动RAPserver的配置（Tomcat）。

推荐用proxyTable去解决本地开发环境的跨域问题： proxy.html

// config/index.js
module.exports = {
  // ...
  dev: {
    proxyTable: {
      // proxy all requests starting with /api to jsonplaceholder
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

按照文档里的示例添加：

proxyTable: {
    '/api': {
      target: 'http://rap.****.com/mockjs/3/',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
   }

这里要注意的是 ‘/api’ 中的 ’/‘ 一定要有， 最开始写成’api’，target和pathRewrite各种改各种尝试，访问接口都是404

另外dev.env.js配置了API请求的base，需要改成本地请求，和前面配置的规则一样

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_BASE: '"/api/"'
})

赏

谢谢你请我吃糖果

支付宝

微信