分离 React 应用和 Laravel 8 api，不设置 cookie/cors答案

【问题标题】：Separate React app and Laravel 8 api, doesnt set cookie/cors分离 React 应用和 Laravel 8 api，不设置 cookie/cors
【发布时间】：2022-04-28 13:22:05
【问题描述】：

我在 localhost:3000 上有一个使用 Axios 的独立反应应用程序我使用 sanctum 向我的 Laravel 8 api 发出请求。请求通过：

但是 cookie 没有设置。我在 stackoverflow 上找到了一个线程，并制作了一个 Cors 中间件并将 http://localhost:3000 添加到允许列表中，因为在控制台中出现 cors 错误之前。现在控制台很干净，我在请求中得到了 cookie，只是没有设置。

我的axios是这样配置的：

   axios({
        method:'post',
    url:'http://localhost:8000/api/login',
    data:{
        'email':email,
        'password':password
    },
    
    headers:{
        'Access-Control-Allow-Origin': '*', 
        withCredentials:true,
        'Content-Type': 'application/json'
    }
})
.then(function(response){
    console.log(response.data);
})
.catch(function(error){
    console.log("error: " + error);
});

并在我的 laravel api 中处理：

public function handle(Request $request, Closure $next)
{
    return $next($request)
            ->header('Access-Control-Allow-Origin', 'http://localhost:3000')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Credentials', true);
}

我在 authController 中的登录方法：

    public function login(Request $request)
{
    if(Auth::attempt(['email' => $request->email, 'password' => $request->password])){ 
        $auth = Auth::user(); 
    $token = $auth->createToken('token')->plainTextToken;
    $response = response('Set Cookie');
    $response->withCookie(cookie('jwt', $token, 60));
    return $response;
} 
else{ 
    return $this->handleError('Unauthorised.', ['error'=>'Unauthorised']);
}

}

响应 cookie 图像：

请注意：我正在使用“Xampp for Apache/MySql”在 Windows10 上进行开发，如果在此类行为中发挥任何作用，则为“Composer”。

有什么建议我需要更改/做什么才能将 cookie 导入我的 FE 应用程序？还是cors的原因吗？如何设置本地开发环境，以免遇到此类问题。

【问题讨论】：

您甚至会收到 CORS 错误吗？如果是这样，错误消息说明了什么？而且我没有看到任何设置 cookie 的代码。
我在我的登录控制器中返回它：$response = response('Set Cookie'); $response->withCookie(cookie('jwt', $token, 60));返回$响应；不，我没有收到任何错误，设置的 cookie 在请求响应中也是可见的，只是在我检查 chrome 中的 application-> cookies 选项卡时不存在
看起来您正在使用 browsersync，这会造成问题。如果您使用 browsersync 阅读帖子warrickbayman.medium.com/browsersync-and-inertia-8e3ed647669a 上的说明
你能显示你在响应中得到的Set-Cookie 标头吗？
我用响应 cookie 在我的帖子中添加了一张图片

标签： reactjs laravel cookies axios

【解决方案1】：

我遇到了同样的问题，我找到了解决方法，所以如果你使用Axios，需要添加{withCredentials:true}，对于获取，请添加Credentials:include。

【讨论】：