Angular 代理配置没有任何效果答案

【问题标题】：Angular proxy config not having any effectAngular 代理配置没有任何效果
【发布时间】：2022-11-26 15:21:27
【问题描述】：

我有一个运行在http://localhost:8000/api 的 REST 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"
    },

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

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

Proxy created: /api -> http://localhost:8080 (I saw this here.)

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

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

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

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

【问题讨论】：

您的应用点击了什么网址，例如this.httpClient.get(url)？
我正在使用fetch()。端点是http://localhost:8000/api/stoerungen。
我怀疑（或者我很惊讶）从应用程序中调用的 API 是 localhost - 在这种情况下你不需要代理
好吧，我可以在同一链接下使用浏览器调用 API。是什么让您认为我不需要代理？这是一个不同的来源——否则为什么我会收到 CORS 错误？
我基于此更新了我的答案

标签： angular proxy cors

【解决方案1】：

尝试不带前导点的代理配置 url "proxyConfig": "src/proxy.conf.json"

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

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

只有对开发服务器的调用才会被代理。如果你直接打电话给localhost:8000/api是行不通的

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

【讨论】：

找到了配置，因为我给了一个错误的路径，我得到了找不到代理配置的错误。所以不是那样的。后端是用 Django 制作的。
你是对的。我更改了调用端口 4200 的 URL，这是 Angular 应用程序的端口，请求被代理到 8000。我想我完全误解了代理的工作原理，但至少我现在可以使用 API。谢谢！
通常使用 environments.ts 文件来设置服务器的基本 url。对于模拟环境，将 URL 设置为 /，以便所有调用都转到开发服务器
对于任何想知道为什么在正确设置后它仍然无法工作的人来说，如果你的角度在 https 上运行，但后端在 http 上运行，那么你似乎会遇到这个问题。如果你将后端更改为在 https 上运行或在 http 前端运行，并适当设置“安全”标志，它将按预期开始工作
@Drenai Only calls made to the dev server will be proxied. If you're calling localhost:8000/api directly it won't work. You call localhost:4200/api, the Angular dev server receives the request, and proxies it to localhost:8000/api太棒了！这真的帮助了我！

【解决方案2】：

投票的答案不是解决方案。使用 Angular 14 仍然不适合我。

我的设置是按照文档页面进行的，一切看起来都很好，但仍然无法正常工作。

终端中的构建日志不记录Proxy created: /api -> ...，正如我在另一个使用 Angular 11 和工作代理的项目中看到的那样。

看起来像是 Angular 14 的问题。

【讨论】：