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