Angular 代理配置没有任何效果

Question

我有一个 REST API 后端运行ning 在 http://localhost:8000/api，我的 Angular 13 应用程序运行s 在 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

尝试不带前导点 "proxyConfig": "src/proxy.conf.json"

的代理配置 url

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

如果您使用的是 Node Express，则可以添加 cors middleware 如果直接访问服务器

只会代理对开发服务器的调用。如果你直接调用 localhost:8000/api 它将不起作用

您调用 localhost:4200/api，Angular 开发服务器收到请求，并将其代理到 localhost:8000/api

Angular 代理配置没有任何效果

Angular proxy config not having any effect

angular

proxy

cors