常用代理方式 http-server / webpack

http-server

Http-server 是基于 nodejs 的 http 服务器，它最大好处就是：可以使任意一个目录成为服务器的目录，完全抛开后台的沉重工程，直接运行想要的 js 代码。

全局安装：npm install http-server -g

然后到你需要运行展示的 html 资源目录执行
http-server -P http://www.your-backend.com/api

http://www.your-backend.com/api 是你后端反向代理的接口地址，你需要修改成你自己的。
然后你就可以使用 http://localhost:8080 进行访问了（如果 8080 端口不被占用掉的话，若占用了你可以 -p 指定其他端口 ）

官方文档 http-server
默认 web 目录是当前目录，想改变 web 目录的话，在命令后面加上本地路径：
http-server <path_of_project>
查看帮助使用 http-server –help，如果想改变端口和地址采用如下方式：
http-server <path> -a 0.0.0.0 -p 8080

webpack 配置代理

最简方式:

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': 'http://localhost:3000',
    },
  },
};

上述配置将自动把 /api 这一地址的访问转请求到 http://localhost:3000 从而起到了代理的作用。 如果你的规则需要去掉 api 前缀，你可以使用重写地址的方式。

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: { '^/api': '' },
      },
    },
  },
};

你可能还遇到 https 的安全问题触发未验证的证书错误, 则你可以简单的加上 secure: false 来处理

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://other-server.example.com',
        secure: false,
      },
    },
  },
};

有时你不想代理所有的请求。可以基于一个函数的返回值绕过代理。 在函数中你可以访问请求体、响应体和代理选项。必须返回 false 或路径，来跳过代理请求。 例如：对于浏览器请求，你想要提供一个 HTML 页面，但是对于 API 请求则保持代理。你可以这样做：

proxy: {
  "/api": {
    target: "http://localhost:3000",
    bypass: function(req, res, proxyOptions) {
      if (req.headers.accept.indexOf("html") !== -1) {
        console.log("Skipping proxy for browser request.");
        return "/index.html";
      }
    }
  }
}

多个路径的代理

proxy: [
  {
    context: ['/auth', '/api'],
    target: 'http://localhost:3000',
  },
];

跨域

官网地址：webpack

参考链接：谁说前端需要懂 Nginx 了？