角度代理配置没有任何效果

Question

我有一个在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节点，但没有更改。(

现在，当我运行触发ng serve的npm start时，我根本看不到在控制台输出中设置了代理，而且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-到后端服务器

如果你使用Node express，如果直接点击服务器，你可以添加cors中间件

只有对开发服务器的调用才会被代理。如果你直接打给localhost:8000/api，就不起作用了

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