axios Laravel Sanctum用于不同域的API认证

zbdgwd5y  于 2023-05-12  发布在  iOS
关注(0)|答案(1)|浏览(120)

我在Laravel中验证API请求,它在本地工作得很好,但当我部署两者时(在Firebase上部署React,在不同的域上部署Laravel),API身份验证停止工作。
这是app/Http/Kernel.php

  1. protected $middlewareGroups = [
  2. 'api' => [
  3. \Fruitcake\Cors\HandleCors::class,
  4. // \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
  5. 'throttle:api',
  6. \Illuminate\Routing\Middleware\SubstituteBindings::class,
  7. ],
  8. ];

这是config/cors.php

  1. 'paths' => ['api/*', 'sanctum/csrf-cookie'],
  2. 'allowed_methods' => ['*'],
  3. 'allowed_origins' => ['http://localhost:3000', 'https://example.web.app'],
  4. 'allowed_origins_patterns' => [],
  5. 'allowed_headers' => ['*'],
  6. 'exposed_headers' => [],
  7. 'max_age' => 0,
  8. 'supports_credentials' => true,

当我用Axios向React发出请求时,我收到了401错误。
我问了ChatGPT和搜索了很多,但它没有工作。
我想从不同的域向Laravel发出请求并通过sanctum验证它们。
//////////////////////////////////////
我切换到JWT auth,因为@jurandou提到laravel/sanctum不支持来自不同域的API授权。

bq3bfh9z

bq3bfh9z1#

在具有API路由端的域上,您必须:

迁移,确保有personal_access_tokens和users表
创建一个用户,使其能够创建令牌
编辑config/cors.php:

  1. 'paths' => [
  2. 'api/*',
  3. 'sanctum/csrf-cookie',
  4. 'http://www.domain-to-accept-requests/*',
  5. ],
  6. 'supports_credentials' => true

***在routes/api.php中创建这些路由:***(仅供参考)

  1. Route::get('tokens/create', [ApiController::class, 'createTokens'])->name('tokens.create');
  2. Route::middleware('auth:sanctum')->get('/users/{user}', function (Request $request) {
  3. $user = User::find($request->user);
  4. return response($user);
  5. });

使用createTokens方法创建ApiController

  1. public function createTokens()
  2. {
  3. $user = User::find(1);
  4. $token_name = 'get_api_infos_token';
  5. $user->tokens()->where('name', $token_name)->delete();
  6. $token = $user->createToken($token_name, ['infos:get']);
  7. return ['token' => $token->plainTextToken];
  8. }

createToken方法的第二个参数在查看能力时很有用,如果有兴趣可以参考sanctum文档。
在另一个域http://www.domain-to-accept-requests/上,下面是一个示例axios js

  1. const testApi = async () => {
  2. try {
  3. const responseToken = await axios.get('http://www.api-domain.test/api/tokens/create')
  4. const headers = { 'Authorization': 'Bearer ' + responseToken.data.token }
  5. const response = await axios.get('http://www.api-domain.test/api/users/1', {headers})
  6. console.log(response.data)
  7. } catch (error) {}
  8. }

希望有帮助?

展开查看全部

相关问题