關于目標URL的Angular404NotFound

我目前正在使用 Angular/Spring 開發一個專案。我在 Angular 方面有問題。無論如何，我都會收到 404 not found 錯誤。如果是 get, put, for an employee, a provider，不管，它都會回傳 404 not found 錯誤。我需要補充一點，我在 Postman 中測驗了我的端點，一切正常，所有這些。這里有一些我認為會有所幫助的課程。如果您需要更多資訊和代碼，請立即詢問，我會在很短的時間內對其進行編輯。包.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 serve 時，我在開始時添加了一個配置 json。

代理.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 { }

這是瀏覽器控制臺中的錯誤

更新：我還附上了專案樹

我不明白為什么無論如何這都會回傳 404 not found 錯誤。我之前在一個擁有 Ultimate 版本的 IntelliJ 專案上使用它并且它作業正常，代碼沒有改變，只有 IDE，因為現在我使用的是 Visual Studio Code。為了讓我的專案正常作業，這里需要添加一些額外的東西，還是我的邏輯有問題？

重要提示：正如我所說，無論是什么：員工、提供商、發票等。所有這些都回傳 404 未找到關于請求型別（獲取、發布、洗掉等）。

謝謝，如果這需要更多資源，請告訴我，我會編輯帖子。

uj5u.com熱心網友回復：

通過服務應用程式

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

并在您的網址前加上一個正斜杠，如您的proxy.config.json

private url = "/server/employee/";

標籤：有角度的 路线 http-status-code-404

上一篇：角度路由和本地化

下一篇：下拉選單空-角度