解决 Angular 在开发环境跨域问题

2019/12/03 93

Angular

Angular 服务默认地址是 localhost:4200,如果你使用前后端分离的方式开发,作为服务端,也需要一个单端的端口,这样也就导致了一个问题:在开发阶段需要解决跨域的问题,但是生产环境不需要

在 Angular 中使用 Proxy 解决 CORS

现在,我们可以直接设置一个后端代理,现在我们有一个后端 api 服务在 localhost:8001/api,我们想做的就是让 localhost:4200/api 代理所有的localhost:8001/api

通过配置代理启用 CORS,我们需要先创建一个 src/proxy.conf.json 文件在 Angular 根目录。

{
    "/api/*": {
        "target": "http://localhost:8001",
        "secure": false,
        "logLevel": "debug"
    }
}

在 angular.json 中定义配置代理。

"architect": {
    "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
                "browserTarget": "project-name:build",
                "proxyConfig": "src/proxy.conf.json"
            },
          }
}
评论