代码之家  ›  专栏  ›  技术社区  ›  ameyCU

角度错误:的Http失败响应http://localhost:3000/login:404找不到

  •  0
  • ameyCU  · 技术社区  · 7 年前

    我想获得用户在后端输入的登录信息。 以下是后端代码:-

    package main
    
    import (
    
        "fmt"
        "net/http"
        "github.com/gorilla/mux"
        "github.com/gorilla/handlers"
        "encoding/json"
        "log"
    )
    
    type LoginDetails struct {
       Username string `json:"username"` 
       Password string `json:"password"`
    }
    
    func login(w http.ResponseWriter, req *http.Request) {
        var loginData LoginDetails
        err := json.NewDecoder(req.Body).Decode(&loginData)
        if err!=nil{
            panic(err)
        }
    }
    
    func main() {
        fmt.Println("Starting server at http://localhost:3000...")
        router := mux.NewRouter()
        router.PathPrefix("/").Handler(http.FileServer(http.Dir("./static/dist/static")))
        router.HandleFunc("/login", login)
    
        headersOk := handlers.AllowedHeaders([]string{"Authorization"})
        methodsOk := handlers.AllowedMethods([]string{"GET", "POST", "OPTIONS"})
        log.Fatal(http.ListenAndServe(":3000", handlers.CORS( headersOk, methodsOk)(router)))
    }
    

    角度代码:-

    登录。组成部分ts 文件:-

    import { Component, OnInit } from '@angular/core';
    import { FormGroup, FormControl, FormBuilder } from '@angular/forms';
    import { HttpErrorResponse} from '@angular/common/http';
    import { LoginService } from './login.service';
    import { LoginDetails } from './login';
    
    @Component({
      selector: 'app-login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.css'],
      providers : [LoginService, LoginDetails]
    })
    export class LoginComponent implements OnInit {
    
      loginForm : FormGroup; 
      constructor(private loginData : LoginDetails,  private loginservice:  LoginService, private _formBuilder : FormBuilder){}
    
      ngOnInit() {
        this.loginForm = this._formBuilder.group({
          username : ['username'], 
          password : ['password']
        })
      }
    
      OnSubmit(){
          this.loginData.username = this.loginForm.controls.username.value;
          this.loginData.password = this.loginForm.controls.password.value;
    
          this.loginservice.loginUser(this.loginData).subscribe(response => {
              console.log(response)
          },(err: HttpErrorResponse) => {
              console.log(err);
          });
      }
    
    }
    

    登录。服务ts 文件:-

    import { Injectable } from '@angular/core';
    import { HttpClient, HttpClientModule, HttpHeaders} from '@angular/common /http';
    import { Observable } from 'rxjs';
    import { LoginDetails } from './login'
    
    
    @Injectable()
    
    export class LoginService{
    
        private _url : string = "http://localhost:3000/login";
        constructor( private http : HttpClient){}
    
        loginUser(loginData : LoginDetails): Observable <any>{
            console.log(loginData)
            return this.http.post(this._url, loginData, {responseType : 'text'});   
        }
    }
    

    我收到的错误是:- POST http://localhost:3000/login 404 (Not Found) .

    0 回复  |  直到 7 年前
        1
  •  0
  •   Yann Duperis    5 年前

    我把重点放在服务器端,因为问题出在服务器端。

    解决方案

    我换了 main.go 通过

    package main
    
    import (
        "encoding/json"
        "fmt"
        "github.com/gorilla/handlers"
        "github.com/gorilla/mux"
        "log"
        "net/http"
    )
    
    
    type LoginDetails struct {
        Username string `json:"username"`
        Password string `json:"password"`
    }
    
    func login(w http.ResponseWriter, req *http.Request) {
        var loginData LoginDetails
        err := json.NewDecoder(req.Body).Decode(&loginData)
        if err != nil {
            panic(err)
        }
        _, err = w.Write([]byte("ok\n"))
        if err != nil{
            panic(err)
        }
    }
    
    func main() {
        fmt.Println("Starting server at http://localhost:3000...")
        router := mux.NewRouter()
        router.HandleFunc("/login", login) // Registering /login before / seems to do the trick
        router.PathPrefix("/").Handler(http.FileServer(http.Dir("./static/dist/static")))
    
        headersOk := handlers.AllowedHeaders([]string{"Authorization"})
        methodsOk := handlers.AllowedMethods([]string{"GET", "POST", "OPTIONS"})
        log.Fatal(http.ListenAndServe(":3000", handlers.CORS(headersOk, methodsOk)(router)))
    }
    

    溶液试验

    $ curl -X POST -H "Content-Type: application/json" -d '{"username": "user", "password": "p4ssw0rd"}' http://127.0.0.1:3000/login
    ok
    

    解释

    根据 mux documentation :

    路由将按照它们添加到路由器的顺序进行测试。如果两个 路线匹配,第一个获胜:

    以下是与您的案例相匹配的示例:

    r := mux.NewRouter()
    r.HandleFunc("/specific", specificHandler)
    r.PathPrefix("/").Handler(catchAllHandler)
    

    您的“/”处理程序似乎在“/”登录”处理程序之前捕获了请求。

    推荐文章