我已经设置了使用.NET Web API的Angular 14服务的最简单实现,但由于某种原因,我无法让该服务返回HTTP 404错误以外的任何内容。
我已经手动测试了API控制器,这肯定会返回我想要的数据,但由于某种原因,来自Angular的API调用似乎从未得到路由。
我已经尝试了我能想到的proxy.conf.js
中的每一种配置,但这是我目前拥有的配置:
{
context: [
"/test",
],
target: "https://localhost:7265/test",
secure: true,
logLevel: "debug"
}
据我所知,代理将接受任何对https://localhost:4200/test
(我的本地主机)的请求,并将其路由到https://localhost:7265/test
,但这似乎从未发生过。
它似乎也没有记录任何关于代理的信息(据我所知,这是logLevel
设置所做的)。
proxy.conf.js:
const PROXY_CONFIG = [
{
context: [
"/test",
],
target: "https://localhost:7265/test",
secure: true,
logLevel: "debug"
}
]
module.exports = PROXY_CONFIG;
angular.json:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angularapp": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/angularapp",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "angularapp:build:production"
},
"development": {
"browserTarget": "angularapp:build:development"
}
},
"defaultConfiguration": "development",
"options": {
"proxyConfig": "src/proxy.conf.js"
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "angularapp:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"polyfills": [
"zone.js",
"zone.js/testing"
],
"tsConfig": "tsconfig.spec.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": [],
"karmaConfig": "karma.conf.js"
}
}
}
}
}
}
我的应用组件API调用:
http.get<WeatherForecast[]>('/test').subscribe(result => {
console.log('contact', result);
}, error => console.error(error));
最后是我的控制器:
using Microsoft.AspNetCore.Mvc;
using webapi.Interfaces;
using webapi.Models;
using webapi.Services;
using System.Text;
namespace webapi.Controllers;
[ApiController]
[Route("[controller]")]
public class ContactController : ControllerBase
{
private readonly IConfiguration _configuration;
private readonly ILogger<ContactController> _logger;
private readonly IEmailService _emailService;
private static readonly string[] Summaries = new[]
{
"Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
};
public ContactController(IConfiguration configuration, ILogger<ContactController> logger, IEmailService elasticEmailService)
{
_configuration = configuration;
_logger = logger;
_emailService = elasticEmailService;
}
[HttpGet]
[Route("~/test")]
public IEnumerable<WeatherForecast> Get()
{
return Enumerable.Range(1, 5).Select(index => new WeatherForecast
{
Date = DateOnly.FromDateTime(DateTime.Now.AddDays(index)),
TemperatureC = Random.Shared.Next(-20, 55),
Summary = Summaries[Random.Shared.Next(Summaries.Length)]
})
.ToArray();
}
}
如前所述,当我直接查询https://localhost:7265/test
时,得到JSON反馈,但通过Angular查询时得到404。
有人知道我哪里做错了吗?
1条答案
按热度按时间yc0p9oo01#
我不确定问题出在哪里。也许可以尝试从目标中删除
/test
和/或将secure
设置为false。但是如果这没有帮助,下面是您可以解决问题的方法。在浏览器开发者工具(网络)中,您将不会看到由代理重定向的URL,而是最初调用的URL。
如果要查看代理重定向是否正确应用,可以使用
--verbose
选项在日志中查看。下面是我如何设置我的代理.(我使用json格式)
(Set
secure
设置为false(如果出现CERT错误)。现在,如果代理路由有问题,您应该在日志中看到一个错误(
--verbose
和调试日志级别)。**摘要:**因此,如果“详细”日志中没有任何错误,并且在测试(发出请求)时也没有显示任何错误,则可能是后端端点有问题。
**旁注:**您不应该将代理用于开发以外的其他用途(至少不应该用于生产)。因此,您应该更改angular.json,使其仅用于开发。
更新:我尝试了一下,发现路径完全应用到了新的目标,所以你不需要
/test
,我相应地更新了我的代理配置示例。