reactjs - 反应 - Laravel API CORS

问题描述

我的本地主机上有一个 Laravel API ( http://localhost:8000 ) 我的本地主机上有 React APP ( http://localhost:3000 )

当我尝试使用 Axios 发布 Auth 时，我出错了；

“ Access-Control-Allow-Origin 不允许来源http://localhost:3000 。由于访问控制检查， XMLHttpRequest 无法加载http://localhost:8000/api/ login。http://localhost:8000/api /login 加载资源失败：Access-Control-Allow-Origin 不允许Origin http://localhost:3000 。未处理的承诺拒绝：错误：网络错误“

我正在与您分享我的 Laravel Cors 代码和我的反应代码。可能是什么问题？

当我尝试使用“邮递员”发布时，响应标头显示“*”允许访问控制允许来源。

内核.php

protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            // \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

        'api' => [
            'throttle:60,1',
            'bindings',
            'cors'
        ],
    ];

    /**
     * The application's route middleware.
     *
     * These middleware may be assigned to groups or used individually.
     *
     * @var array
     */
    protected $routeMiddleware = [
        'auth' => \App\Http\Middleware\Authenticate::class,
        'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
        'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,
        'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
        'can' => \Illuminate\Auth\Middleware\Authorize::class,
        'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
        'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
        'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
        'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
        'cors' => \App\Http\Middleware\Cors::class // <-- add this line
    ];

路线/api.php

Route::group(['middleware' => ['cors']], function () {
    Route::post('register', 'AuthController@register');
    Route::post('login', 'AuthController@login');
    Route::post('me', 'AuthController@me');

中间件/CORS.php

<?php

namespace App\Http\Middleware;
use Closure;
class Cors
{
  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', 'X-Requested-With, Content-Type, X-Token-Auth, Authorization');
  }
}

还有我的基本 React Axios 调用；

function loginWithEmailSaga(payload) {
  const { email, password } = payload;
  axios.post(
    loginUrl,
    { email, password }
  )
    .then(res => {
      console.log(res);
    });
}

我看不出它给出 CORS 错误的任何原因。一切似乎都是“允许的”。可能是什么问题呢？我能做些什么来处理那件事？

标签： reactjslaravelapi

reactjs - 反应 - Laravel API CORS

问题描述

解决方案

推荐阅读