首页 > 解决方案 > 找不到将 json 发送到后端的 Angular 错误 404

问题描述

我现在正在学习前端和后端,我试图搜索这个错误,但我没有看到有人将 json 发送到后端。我收到这个 错误

我不确定这是否是因为 URL。如果我在邮递员中尝试该 URL 和 Json,它可以正常工作,它会插入到数据库中。 邮递员证明

它基本上是一个注册页面。如果邮递员和浏览器上的网址相同,我不知道为什么会出现该错误,我也在发送相同的数据,

这是代码:

用户服务.ts

        import { Injectable } from '@angular/core';
        import { HttpClient, HttpHeaders } from "@angular/common/http";
        import { Observable } from "rxjs";
        import { User } from "../models/user";
        import { global } from "./global";
    @Injectable()
    export class UserService{
        public url: string;
    
        constructor(
            public _http: HttpClient
        ){
            this.url = global.url;
        }
    
        test(){
            return "Hola mundo Servicio";
        }
    
        register(user): Observable<any>{
            let json = JSON.stringify(user);
            let params = 'json='+json;
    
            let headers = new HttpHeaders().set('Content-Type', 'aplication/x-www-form-urlencoded');
            console.log(json);
            console.log(params);
            console.log(headers);
    
            return this._http.post(this.url+'register', params, {headers: headers});
        }
}

全球.ts

export var global = {
url: 'http://api-rest-laravel.com.devel/api/'}

注册组件.ts

import { Component, OnInit } from '@angular/core';
import { User } from '../../models/user';
import { UserService } from "../../services/user.service";

@Component({
  selector: 'register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css'],
  providers: [UserService]
})
export class RegisterComponent implements OnInit {

    public page_title: string;
  public user: User;

  constructor(
      private _userService: UserService
    ) {
    this.page_title = 'Regístrate';
    this.user = new User(1, '', '', 'ROLE_USER', '', '', '', '');
  }

  ngOnInit(): void {

  }

  onSubmit(form){
  console.log('Componente de registro');
    console.log(this._userService.test());
    this._userService.register(this.user).subscribe(
      response => {
        console.log(response);
        form.reset(); 
      },
      error => {
        console.log(<any>error);
      }
    );

  
  }

}

app.module.ts(如果需要)

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { routing, appRoutingProviders } from './app.routing';


import { AppComponent } from './app.component';
import { LoginComponent } from './components/login/login.component';
import { RegisterComponent } from './components/register/register.component';
import { ErrorComponent } from './components/error/error.component';
import { HomeComponent } from './components/home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    RegisterComponent,
    ErrorComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    routing,
    FormsModule,
    HttpClientModule
  ],
  providers: [
    appRoutingProviders
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

标签: jsonangularfrontendhttp-status-code-404

解决方案


推荐阅读