开发 vue 项目,大多数我们都是使用的vue-cli,众所周知,我们在本地联调服务 API 时,会存在跨域问题。那么我们如何利用cli解决跨域问题呢? 其实webpack官网已有介绍dev-server#proxy (opens new window)

如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。 这个问题可以通过 vue.config.js 中的devServer.proxy 选项来配置。

module.exports = {
  devServer: {
    host: "localhost.company.com",
    proxy: {
      "/api": {
        target: "http://www.example.org", // 目标服务器 host
        changeOrigin: true, // 主要是这里:默认false,是否需要改变原始主机头为目标URL
        ws: true, // 是否代理websockets
        pathRewrite: {
          "^/api/old-path": "/api/new-path", // 重写请求,比如我们源访问的是api/old-path,那么请求会被解析为/api/new-path
          "^/api/remove/path": "/path" // 同上
        }
      }
    }
  }
};
【未经作者允许禁止转载】 Last Updated: 11/20/2021, 8:33:35 AM