Запрос должен быть действительным запросом CORS и должен включать заголовок «Origin».угловатый

Question

У меня есть бэкэнд Laravel / Lumen с проблемами CORS.Чтобы решить их, я использую этот пакет: https://github.com/barryvdh/laravel-cors

Когда я делаю запрос, он работает, когда я загружаю любые расширения cors toggle, которые есть.В моем понимании это означает, что CORS работает на моем сервере, но мне нужно добавить что-то в angular, чтобы он работал полностью.Как утверждает разработчик на github: «Запрос должен быть действительным CORS-запросом и должен включать заголовок« Origin »»

Можно ли каким-либо образом добавить этот заголовок?Заранее спасибо

Answer 1

Если вы используете nginx в качестве бэкэнда, вы можете решить эту проблему, добавив следующие заголовки в конфигурацию сервера:

location ~ \.php$ {
    [...]
    add_header "Access-Control-Allow-Origin"   * always;
    add_header "Access-Control-Allow-Methods"  "GET, POST, DELETE, PUT, OPTIONS, HEAD" always;
    add_header "Access-Control-Allow-Headers"  "DNT, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type, Range, Authorization, Origin, Accept, Accept-Language" always;
    add_header "Access-Control-Expose-Headers" "Content-Length,Content-Range" always;
}

В заголовке Access-Control-Allow-Origin указывается домен, от которого принимаются запросы.Вы можете использовать URL своего домена или *, чтобы принимать запросы от любого домена.Если вы используете несколько поддоменов для внешнего интерфейса, вы должны использовать * и заблокировать доступ на уровне приложения.

Answer 2

Я боролся с подобной проблемой на нескольких фронтах.Лучшее решение, которое я нашел, это реализовать конфигурационный файл proxy.conf.json, который выполняет маршрутизацию, вместо того, чтобы напрямую связываться с CORS.Вы реализуете его, используя

    ng serve --proxy-config proxy.conf.json

. Это делает CORS действительным без каких-либо плагинов в вашем браузере или иным образом.Я отошел от плагинов CORS, потому что забыл отключить их во время «серфинга в дикой природе», что оставило меня уязвимым для хаков.

Подробнее о том, как реализовать это решение, можно прочитать на поток переполнения стека

Answer 3

Я не уверен, какой заголовок вам нужен, но если вы хотите добавить некоторые заголовки ко всем вашим запросам, вы можете создать собственный HttpIntercetor, например:

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class HttpCustomInterceptor implements HttpInterceptor {
  constructor() { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authRequest = request.clone({
      setHeaders: {
        Origin: 'WhateverYouWantTo'
      }
    });

    return next.handle(authRequest);
  }
}

Если вы хотите сделатьэто только для некоторых конкретных запросов, например GET, тогда вы можете поместить некоторые оператор if в метод intercept.А затем используйте HttpCustomInterceptor в качестве поставщика для HTTP_INTERCEPTOR внутри вашего модуля:

@NgModule({
  imports: [
    HttpClientModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpClientInterceptor,
      multi: true,
    }
  ]
})
export class AppModule { }

Надеюсь, это поможет.

Answer 4

Вы также должны добавить заголовки cors в запросе angularjs.

например

                    $http({

                        method: 'POST',

                        data: data,

                        url: " url of post request",

                         withCredentials: false,

                         headers: {
                        'Content-Type': 'application/json',
                        'Access-Control-Allow-Origin' : "url of laravel",
                        'Access-Control-Allow-Methods': 'POST',
                        'Access-Control-Allow-Credentials' : false
                    }