Laravel Passport 和 Angular 在 api/login 路线上给了我未经授权但在邮递员上工作正常？

Posted 2023-03-14

【中文标题】Laravel Passport 和 Angular 在 api/login 路线上给了我未经授权但在邮递员上工作正常？

【英文标题】：Laravel Passport and Angular giving me unauthorized on api/login route but works fine on postman?

【发布时间】：2019-01-23 23:55:30

【问题描述】：

我遇到了这个问题，一直在尝试解决它并在互联网上搜索解决方案，但我没有找到任何帮助我的方法， 我有这个应用程序，在后端有 Laravel 和 Passport，在客户端有 Angular， 我正在尝试通过http://localhost:8000/api/login 路由对用户进行身份验证 它在邮递员上工作正常并给我令牌，但在 Angular 上给我未经授权且无法获得令牌， 我在 laravel api 上尝试了一个 get 请求，它正在获取我的数据并在 Angular 中显示，所以 get 请求对我来说工作正常，问题出在 post 请求虽然我已经检查了很多次登录凭据并且它是正确的

usercontroller.php 包含登录方法

    class UserController extends Controller

    public function __construct()
    
        $this->middleware('auth:api')->except(['login' , 'register' , 'get_articles']);
    

  public function register(Request $request)
    
        $validator = Validator::make($request->all() , [
            'name' => 'required|min:3|max:100',
            'email' => 'required|email|unique:users,email',
            'password' => 'required|min:6|max:100',
            'c_password' => 'required|same:password'
        ]);

        if($validator->fails())
        
            return response()->json(['errors' => $validator->errors()] , 400);
        

        $user = new User;
        $user->email = $request->input('email');
        $user->name = $request->input('name');
        $user->password = Hash::make($request->input('password'));
        $user->save();
        return response()->json(['message' => 'created user successfully'] , 201);
    


    public function login(Request $request)
    

        if(Auth::attempt(['email' => request('email') , 'password' => request('password')]))
        
            $user = Auth::user();
            $success['token'] = $user->createToken('myapp')->accessToken;
            return response()->json(['success' => $success] , 200);
        

        return response()->json(['error' => 'unauthorized'] , 401);
    

Cors.php

<?php

namespace App\Http\Middleware;

use Closure;

class Cors

    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    

        return $next($request)
        ->header('Access-Control-Allow-Origin' , '*')
        ->header('Access-Control-Allow-Methods' , 'GET,POST,PUT,DELETE,OPTIONS')
        ->header('Access-Control-Allow-Headers' , 'Origin , Content-Type, Accept, Authorization, X-Request-With')
        ->header('Access-Control-Allow-Credentials' ,  'true');
    

这里是 login.component.ts

import  Component, OnInit  from '@angular/core';
import  HttpClient  from '@angular/common/http';
import  Loginform  from '../loginform';
import  LoginService  from '../login.service';

@Component(
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
)
export class LoginComponent implements OnInit 

  constructor(private http:HttpClient , private LoginService: LoginService)  

  public submitted = false;
  public errorMsg;
  public email = "";
  public pass = "";

  public Loginform = new Loginform(this.email , this.pass);

  ngOnInit() 
  

  onSubmit() 
    this.LoginService.login(this.Loginform).subscribe((data) => console.log(data) , 
      (error) => //this.errorMsg = error.statusText
      console.log(error));
      this.submitted = true;
  

和 login.service.ts

import  Injectable  from '@angular/core';
import  HttpClient, HttpErrorResponse  from '@angular/common/http';
import  Loginform  from './loginform';
import  catchError  from 'rxjs/operators';
import  throwError  from 'rxjs';

@Injectable(
  providedIn: 'root'
)
export class LoginService 

  constructor(private http: HttpClient)  

  public url: string = "http://localhost:8000/api/login"; 

  login(loginform : Loginform) 
    return this.http.post(this.url , loginform).pipe(catchError(this.handleError))
  

  handleError(error: HttpErrorResponse) 
    return throwError(error);
  

这是具有相同凭据的邮递员的快照 postman snapshot

以及浏览器中的错误图片 browser

【参考方案1】：

这可能会发生，因为您正在使用不同的 Content-Type 执行两个请求：在 Postman 的情况下，您使用带有键值主体的 Form-Data，而不是在 Angular6 服务中，您尝试将数据作为 JSON 发送。

两种不同的解决方案：

从 Laravel 控制器序列化 JSON 对象； 尝试在 Angular6 中使用 'Content-Type': 'multipart/form-data' 发送数据。

【讨论】：

非常感谢第一个解决方案对我有用，我尝试了第二个解决方案，我使用了 HttpHeader 变量并将标题附加到 post 请求中，但它不起作用，这就是我使用的 @ 987654322@