关于目标URL找不到的角404

Question

我目前正在从事Angular/Spring的项目。我在角度有问题。 无论如何，我都会收到404的错误。如果要获得，请把员工，提供者放在那里，无论如何，它将返回404个找不到的错误。 我需要补充一点，我在Postman中测试了我的终点，一切都很好。 我认为这是一些我认为会有所帮助的课程。如果您需要更多信息和代码，请立即询问，我将在很短的时间内进行编辑。 package.json：

{
  "name": "csmart-front-end",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.3.0",
    "@angular/common": "~13.3.0",
    "@angular/compiler": "~13.3.0",
    "@angular/core": "~13.3.0",
    "@angular/forms": "~13.3.0",
    "@angular/localize": "~13.3.0",
    "@angular/platform-browser": "~13.3.0",
    "@angular/platform-browser-dynamic": "~13.3.0",
    "@angular/router": "~13.3.0",
    "@ng-bootstrap/ng-bootstrap": "^12.1.2",
    "@popperjs/core": "^2.10.2",
    "bootstrap": "^5.1.3",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.3.6",
    "@angular/cli": "~13.3.6",
    "@angular/compiler-cli": "~13.3.0",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~4.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.6.2"
  }
}

在这里运行ng服务时，我在开始时添加了一个config json。

proxy.conf.json：

{
  "/server": {
    "target": "http://localhost:8080",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug",
    "pathRewrite": {
      "^/server": ""
    }
  }
}

这是我的员工TS文件。我对此没有太多内容，只是一种getallemployees方法，应该将我的员工从后端返回并在表中显示：

import { Component, OnInit } from '@angular/core';
import { EmployeeService } from 'src/app/service/employee.service';
import { Employee } from "../../interface/employee";

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css']
})
export class EmployeeComponent implements OnInit
{
  employeeList: Employee[] = [];

  constructor(public employeeService: EmployeeService) { }

  ngOnInit(): void
  {
    this.employeeService.getAllEmployees().subscribe({
      next: employees => this.employeeList = employees,
      error: err => console.error(err)
    });
  }
}

这是我的员工服务：

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Employee } from "../interface/employee";

@Injectable({
  providedIn: 'root'
})
export class EmployeeService
{
  private url = "server/employee/";

  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':'application/json'
    })
  }

  constructor(private httpClient:HttpClient) { }

  getAllEmployees():Observable<Employee[]> { return this.httpClient.get<Employee[]>(this.url+'find/all'); }
}

最终但并非最不重要的一点是我的应用程序：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './component/home/home.component';
import { EmployeeNewComponent } from './component/employee-new/employee-new.component';
import { EmployeeComponent } from './component/employee/employee.component';
import { EmployeeUpdateComponent } from './component/employee-update/employee-update.component';
import {ProviderComponent} from "./component/provider/provider.component";
import {ProviderNewComponent} from "./component/provider-new/provider-new.component";
import {ProviderUpdate} from "./component/provider-update/provider-update.component";
import {InvoiceinComponent} from "./component/invoicein/invoicein.component";

const routes: Routes = [
  {
    path:'home',
    component:HomeComponent
  },
  {
    path:'employees',
    component:EmployeeComponent
  },
  {
    path:'newEmployee',
    component:EmployeeNewComponent
  },
  {
    path:'editEmployee/:employeeId',
    component:EmployeeUpdateComponent
  },

  {
    path:'invoiceIns',
    component:InvoiceinComponent
  },

  {
    path:'providers',
    component:ProviderComponent
  },
  {
    path:'newProvider',
    component:ProviderNewComponent
  },
  {
    path:'editProvider/:providerId',
    component:ProviderUpdate
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这是浏览器控制台中的错误

update：我还附加了项目树

我看不出为什么无论如何都找不到404的错误。我以前在一个具有最终版本的Intellij项目上使用了此此事，并且它可以使用，而仅更改代码，仅此而已，因为现在我使用的是Visual Studio Code。为了让我的项目工作，还是我的逻辑有错？

重要的是：正如我所说，无论是什么：员工，提供商，发票等。所有这些都没有发现有关请求类型（获取，发布，删除等）的404。

谢谢您，如果需要更多资源，请告诉我，我将编辑帖子。

Answer 1

通过前缀为您的URL，并将其前缀为您的URL。

ng serve --proxy-config proxy.conf.json

通过 proxy.config.json 中定义的前向斜杠，

private url = "/server/employee/";