Проблемы Angular и Laravel CORS Access-Control-Allow-Origin

Я работал над приложениями Angular (Client) и Laravel (API) в течение последних нескольких месяцев локально на моих машинах разработчиков без каких-либо проблем. Несколько дней назад я загрузил приложения (клиент и api) на сервер, и внезапно я начал получать ошибки CORS:

Access to XMLHttpRequest at 'https://api.domain.pt/api/login' from origin 'https://client.domain.pt' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

В начале разработки у меня также были эти ошибки, потому что я использовал разные локальные домены как для клиента, так и для api (client.localhost и api.localhost) и в конечном итоге решил проблемы, добавив промежуточное ПО CORS в мой Laravel API:

public function handle($request, Closure $next)
{
    //apply cors only to api routes
    if (Request::segment(1) == 'api') {

        header("Access-Control-Allow-Origin: *"); 

        $headers = [
            'Access-Control-Allow-Methods' => 'POST, GET, OPTIONS, PUT, DELETE',
            'Access-Control-Allow-Headers' => 'X-Requested-With, X-Auth-Token, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding, X-Login-Origin',
            'Access-Control-Allow-Credentials' => 'true'
        ];

        if ($request->isMethod("OPTIONS")) {
            // The client-side application can set only headers allowed in Access-Control-Allow-Headers
            return Response::make('OK', 200, $headers);
        }

        $response = $next($request);

        foreach ($headers as $key => $value) {
            $response->header($key, $value);
        }
    } else {
        $response = $next($request);
    }

    return $response;
}

Все маршруты используют промежуточное ПО CORS. Когда приложение пытается отправить сообщение в api входа (/ api / login), оно даже не входит в промежуточное ПО CORS.

Почему это работает локально, а не на сервере?

Как вы зарегистрировали это промежуточное ПО? маршрут мудрый или глобально?

Fahim Uddin 01.01.2019 20:32

Как глобально, так и по маршрутам. Я был в отчаянии: - \

Ricky 01.01.2019 20:33
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
2
3 396
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Мне удалось решить свою проблему. Поскольку мое настраиваемое промежуточное ПО CORS не вызывается, я добавил настраиваемые заголовки в свой файл web.config:

<configuration>
  <system.webServer>        
    <!-- SOLVES CORS ISSUES -->
    <httpProtocol>
     <customHeaders>
        <add name = "Access-Control-Allow-Origin" value = "*" />
        <add name = "Access-Control-Allow-Headers" value = "X-Requested-With, X-Auth-Token, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding, X-Login-Origin" />
        <add name = "Access-Control-Allow-Methods" value = "GET, POST, PUT, DELETE, OPTIONS" />
     </customHeaders>
   </httpProtocol>
   <!-- /SOLVES CORS ISSUES -->
  </system.webServer>
</configuration>

Это наиболее подходящее решение, но пока я им воспользуюсь. Если у кого-то есть другое решение, кроме принудительного использования настраиваемых заголовков, ответьте.

Обновлено:

Временное решение для Apache. Добавьте это в свой файл .htaccess:

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "X-Requested-With, X-Auth-Token, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding, X-Login-Origin, responseType"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"

Чтобы получить помощь, перейдите по следующей справочной и справочной ссылке:

You can check CORS Middleware for Laravel package or below link:

Проблемы Angular и Laravel CORS Access-Control-Allow-Origin

Другие вопросы по теме