Vue、Angular单页面应用开发前端代理配置

发布日期: 2021-11-09 阅读: 5393 点赞: 0

前后端代码分离可以很大程度上简化前端开发，提升效率。在github上有不少开源项目将前端工程和后端代码放在同一个仓库里边，比如apollo配置中心。虽然这样也有一定的优势，但对于前端开发人员来说还得把Java环境配置起来才能开发调试。前后端代码是否分离需视团队人员能力而定、并非孰优孰劣之分。本文将介绍前后端代码分离后通过代理请求后端api解决跨域、重写URL路径等问题。

Vue、Angular均使用webpack dev server支持代理功能，配置项相同，但配法稍有不同。点击这里了解更加详细的devserver详细配置项。

Vue 配置

vue.config.js

  devServer: {
    proxy: {
      "/proxy": {
        target: "https://api.example.com",
        secure: false,
        changeOrigin: true,
        withCredentials: true,
        pathRewrite: {
          "^/proxy": ""
        },
        "logLevel": "debug"
      }
    }
  }

Angular 配置

angular 通过启动时传入–proxy-config 指定代理配置文件。

{
    "scripts": {
        "ng": "ng",
        "start": "ng serve --proxy-config proxy.conf.json",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    }
}

简单配法

proxy.conf.json 配置示例如下：

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    },
    "logLevel": "debug"
  }
}

多规则配置

使用js而非json配置。

const PROXY_CONFIG = [
    {
        context: [
            "/my",
            "/many",
            "/endpoints",
            "/i",
            "/need",
            "/to",
            "/proxy"
        ],
        target: "http://localhost:3000",
        secure: false
    }
]

module.exports = PROXY_CONFIG;

Q&A

1. 如何代理https及需要注意的问题？

通常情况下设置target为https URL即可，但如果后端使用自签证书则需要设置secure为false。

{
  "/api": {
    "target": "https://api.example.com",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    },
    "logLevel": "debug"
  }
}

在服务器设置了重定向的情况下可能会导致前端代理接口在请求的时候强制跳转为https，例如期望localhost:5000/proxy/api/v1/users 代理到后端服务器，请求后url重定向为https://localhost:5000/proxy/api/v1/users。已知在k8s ingress里边设置了http重定向https后会导致该问题出现。解决方法为：

方法一、调试时使用后端http协议接口
方法二、通过设置webserver 的https配置项为true来开启https。通过https://localhosst:5000的方式调试

2. 路径重写及注意事项?

通过pathRewrite配置项可灵活配置重写规则。

{
  "/api": {
    "target": "https://api.example.com",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

如上配置将url中的/api替换为空,即去掉了URL里的/api字样。通常REST接口都使用了带api的二级域名因此在url路径里不重复出现/api.

通过URL重写可以美化URL，去掉不必要的前缀。设置时应注意替换规则，通常通过正则匹配带有某前缀的URL来替换/增加/删减部分URL, 建议URL重写规则可读性较好，避免使用复杂晦涩难懂的配置对协同开发成员造成不必要的困扰。

3. 如何对代理设置进行排错？

开发中经常有前端开发同学在代理出现问题时茫然失措，通常情况下以下两种措施可定位代理配置问题。

通过设置代理配置中的logLevel为debug输出调试日志排错。
跟踪后端代理/负载均衡日志（例如 nignx access log）查看请求到后端的路径及状态码是否有误（特别是配置了重写URL后，确认请求到后端的实际URL是否有误）。