Laravel API 不允许我的前端使用 React 和 Redux 访问

Posted 2023-03-04

【中文标题】Laravel API 不允许我的前端使用 React 和 Redux 访问

【英文标题】：Laravel API is not allowing access by my front-end with React and Redux

【发布时间】：2019-01-21 07:13:54

【问题描述】：

我的 API 是使用 Laravel 5.6 版构建的，我的前端使用 React 和 Redux。我在尝试连接到 API 时遇到了 CORs 问题。

无法加载http://127.0.0.1:8000/api/login：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost:3000' 不允许访问。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

我尝试应用我找到的解决方案。我有我的Cors 中间件类：

public function handle($request, Closure $next)

    return $next($request)
        ->header("Access-Control-Allow-Origin", "http://localhost:3000") // Already tried with *
        ->header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE")
        ->header("Access-Control-Allow-Headers", "Content-Type, Authorization");

还有Kernel.php：

protected $middlewareGroups = [
    ...,
    'api' => [
        ...
        'cors'
    ],
];

protected $routeMiddleware = [
    ...
    'cors' => \App\Http\Middleware\Cors::class
];

路线：

Route::post("/login", "Api\UserController@login");
Route::post("/register", "Api\UserController@register");

Route::prefix("users")->group(function () 
    Route::middleware("auth:api")->group(function () 
        Route::get("me", "Api\UserController@details");
    );
);

以及行动：

export function login(data) 
  return dispatch => 
    return dispatch(
      [RSAA]: 
        endpoint: "http://127.0.0.1:8000/api/login",
        method: "POST",
        headers: 
          "Content-Type": "application/json",
        ,
        body: JSON.stringify(data),
        types: [LOGIN, LOGIN_SUCCESS, LOGIN_FAILURE]
      
    )
  

在请求的标头中，我可以看到已发送的 COR 方法。那么缺少什么？

【问题讨论】：

看看这个问题是否有帮助：***.com/questions/33076705/…

【参考方案1】：

使用这个包https://github.com/barryvdh/laravel-cors它可以解决你的cors问题

【讨论】：

是的，我知道。但是没有它是否有可能解决问题？

是的，试试这个，我总是使用简单的方法。只需将以下行添加到 \public\index.php 文件。我认为您不必使用中间件。 header('Access-Control-Allow-Origin: *'); header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');

实际上，如何在单击登录按钮一次时，发送两个请求。一个返回 200，另一个返回 401。

删除您建议的代码使其只发送一次，但由于 COR 仍然失败。

不，这不是一个完美的解决方案...看到这个***.com/a/43881141/8830631

【参考方案2】：

在服务器上使用不可知的设置部署我的 react 应用程序后，我遇到了同样的问题。使用包 laravel-cors 配置 laravel 对我没有帮助。我将服务器的 .htaccess 配置如下：

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"  

【讨论】：

是的，但也没有解决。我猜laravel-cors 是唯一的方法……糟糕的 COR。为什么想出这个？

你是不是在你的域根.htaccess文件中添加了上面的代码。

【参考方案3】：

请在 api.php 的路由文件顶部添加以下行。它将解决 CORS 问题。

use Illuminate\Http\Request;

header('Access-Control-Allow-Origin: *');
//Access-Control-Allow-Origin: *
header('Access-Control-Allow-Methods:  POST, GET, OPTIONS, PUT, DELETE');
header('Access-Control-Allow-Headers:  Content-Type, X-Auth-Token, Origin, Authorization');

【讨论】：

是的，在这里它起作用了。现在，当单击按钮时，前端正在向同一个 API 发送两个请求。你知道为什么吗？