Angular 代理配置没有任何效果

Question

我有一个 REST API 后端在

http://localhost:8000/api

运行，我的 Angular 13 应用程序在

http://localhost:4200

运行。当然，当我尝试查询该后端的任何端点时，我会收到 CORS 错误。

所以我尝试设置 Angular 代理。我添加了包含以下内容的文件

src/proxy.conf.json

：

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

之后，我将以下内容添加到

angular.json

：

"serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "proxyConfig": "./src/proxy.conf.json"
      },
      "configurations": {
        "production": {
          "browserTarget": "photon:build:production"
        },
        "development": {
          "browserTarget": "photon:build:development"
        }
      },
      "defaultConfiguration": "development"
    },

（我还在“development”配置下添加了proxyConfig节点，但没有改变。）

现在，当我运行

npm start

（它会触发

ng serve

）时，我在控制台输出中根本看不到代理已设置 - 并且 API 请求仍然收到 CORS 错误。我相信应该有一些控制台输出显示代理已设置，如下所示：

Proxy created: /api -> http://localhost:8080

（我在这里看到了。）

我不知道为什么这不起作用，这应该很简单。

编辑：这是请求函数本身。

      get(url: string) {
        return fetch(this.apiUrl + url, {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json'
          }
        })
          .then(response => {
             console.log(response);
             return response.json();
          });
      }

该函数接收到的 URL 是正确的，我可以在调试器中看到。

Answer 1

尝试不带前导点的代理配置 url

"proxyConfig": "src/proxy.conf.json"

• https://angular.io/guide/build#proxying-to-a-backend-server

如果您使用 Node Express，则可以添加 cors 中间件（如果直接访问服务器）

只有对开发服务器的调用才会被代理。如果您直接拨打

localhost:8000/api

，则不起作用

您调用

localhost:4200/api

，Angular 开发服务器接收请求，并将其代理到

localhost:8000/api

Answer 2

必须在密钥服务/配置下包含代理配置，这将解决您的问题。

"serve": {

  "builder": "@angular-devkit/build-angular:dev-server",

  "configurations": {

    "production": {

      "buildTarget": "client:build:production",

      "proxyConfig": "proxy.conf.json"

    },

    "development": {

      "buildTarget": "client:build:development",

      "proxyConfig": "proxy.conf.json"

    }

  },

  "defaultConfiguration": "development"

},

Answer 3

我不知道，但某些情况下它只适用于 Angular 应用程序的端口 4200，未指定 p