typescript Angular 代理配置拒绝正确路由,我哪里出错了?

0pizxfdo  于 2023-03-09  发布在  TypeScript
关注(0)|答案(1)|浏览(92)

我已经设置了使用.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。
有人知道我哪里做错了吗?

yc0p9oo0

yc0p9oo01#

我不确定问题出在哪里。也许可以尝试从目标中删除/test和/或将secure设置为false。但是如果这没有帮助,下面是您可以解决问题的方法。
在浏览器开发者工具(网络)中,您将不会看到由代理重定向的URL,而是最初调用的URL。
如果要查看代理重定向是否正确应用,可以使用--verbose选项在日志中查看。

$ npm start -- --verbose

下面是我如何设置我的代理.(我使用json格式)

{
  "/test": {
    "target": "https://localhost:7265",
    "secure": false,
    "changeOrigin": false,
    "logLevel": "debug"
  }
}

(Set secure设置为false(如果出现CERT错误)。
现在,如果代理路由有问题,您应该在日志中看到一个错误(--verbose和调试日志级别)。

"[webpack-dev-server] [HPM] GET /test/some/optional/path -> https://localhost:7265"

**摘要:**因此,如果“详细”日志中没有任何错误,并且在测试(发出请求)时也没有显示任何错误,则可能是后端端点有问题。
**旁注:**您不应该将代理用于开发以外的其他用途(至少不应该用于生产)。因此,您应该更改angular.json,使其仅用于开发。

更新:我尝试了一下,发现路径完全应用到了新的目标,所以你不需要/test,我相应地更新了我的代理配置示例。

相关问题