Angular 15 + Laravel 9 CORS Error

Question

Angular 15 + Laravel 9 CORS Error

Рейтинг: 0Ответов: 1Опубликовано: 09.03.2023

Стек Angular 15 localhost:8100 + Laravel 9 localhost:8000. На беке у менять есть маршрут, который доступен только при sanctum авторизации. Я пытаюсь отправить с фронта POST запрос на бек (с использованием перехватчика, в котором добавляю заголовки Authorization и X-XSRF-TOKEN), но получаю CORS ошибку

api.php

Route::controller(EventController::class)->group(function() {
  Route::post('events/create', 'create')->middleware('auth:sanctum');
});

cors.php

'paths' => ['api/*', 'sanctum/csrf-cookie'],

'allowed_methods' => ['*'],

'allowed_origins' => ['*'],

'allowed_origins_patterns' => [],

'allowed_headers' => ['*'],

'exposed_headers' => [],

'max_age' => 0,

'supports_credentials' => true,

sanctum.php

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
    '%s%s',
    'localhost,
    localhost:3000,
    localhost:4200,
    localhost:8000,
    localhost:8100,
    127.0.0.1,
    127.0.0.1:4200,
    127.0.0.1:8100,
    127.0.0.1:8000,::1',
    Sanctum::currentApplicationUrlWithPort()
))),

xsrf.interceptor.ts

 import { Injectable } from '@angular/core'
import { HttpInterceptor, HttpHandler, HttpRequest, HttpXsrfTokenExtractor } from '@angular/common/http'

@Injectable() export class XsrfInterceptor implements HttpInterceptor {
    constructor(private tokenExtractor: HttpXsrfTokenExtractor) {}
     intercept(req: HttpRequest<any>, next: HttpHandler) {

        const authToken = localStorage.getItem('auth-token')
        const csrfToken = this.tokenExtractor.getToken() as string || ''
        if (authToken && req.method !== 'JSONP'){ 
            const cloned = req.clone({ 
                headers: req.headers
                .set('X-XSRF-TOKEN', csrfToken)
                .set('Authorization', `Bearer ${authToken}`)
                .set('Access-Control-Allow-Credentials', 'true') 
            })
            return next.handle(cloned)
        } else { 
            return next.handle(req)
        } 
    } 
}

Также я пробовал настроить прокси на стороне Angular, но без успешно. Подскажите, пожалуйста как можно исправить эту ошибку.

laravel angular cors sanctum

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Как выяснилось, angular автоматически прокидывает XSRF-TOKEN, я я добавил в interceptor заголовок 'Content-Type': 'application/json' и все заработало

import { Injectable } from '@angular/core'
import { HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http'

@Injectable() export class XsrfInterceptor implements HttpInterceptor {
    //constructor(private tokenExtractor: HttpXsrfTokenExtractor) {}
     intercept(req: HttpRequest<any>, next: HttpHandler) {

        const authToken = localStorage.getItem('auth-token')
        if (authToken && req.method !== 'JSONP'){ 
            const cloned = req.clone({ 
                setHeaders: { 
                    'Content-Type': 'application/json',
                    // 'X-XSRF-TOKEN': csrfToken,
                    'Authorization': `Bearer ${authToken}`
                },
                withCredentials: true
            })
            return next.handle(cloned)         
        } else { 
            return next.handle(req)
        } 
    } 
}

Angular 15 + Laravel 9 CORS Error

Ответы