Я использую angular 4 в качестве внешнего интерфейса и laravel (homestead mydomain.test) в качестве бэкенда. ниже отображаются ошибки в браузере Chrome, когда я хочу отправить файл cookie с angular 4 на серверную часть API laravel:

Файл конфигурации barryvdh / laravel-cors (файл конфигурации cors.php):

return [

    /*
    |--------------------------------------------------------------------------
    | Laravel CORS
    |--------------------------------------------------------------------------
    |
    | allowedOrigins, allowedHeaders and allowedMethods can be set to array('*')
    | to accept any value.
    |
    */

    'supportsCredentials' => true,
'allowedOrigins' => ['http://localhost:4200'],
'allowedHeaders' => ['Content-Type','Accept'],
'allowedMethods' => ['GET','POST','PUT', 'PATCH', 'OPTION'],
'exposedHeaders' => ['Content-Disposition', 'x-total-count', 'x-filename', '*'],
'maxAge' => 0,
'hosts' => ['*'],

Angular 4 запроса:

refreshToken(){

    const headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded', 'Authorization': 'Bearer ' + this.getToken()})
    let options = new RequestOptions({ headers: headers, withCredentials: true });
    return this.http.post(API_DOMAIN + 'refresh', JSON.stringify({}), options)
      .map(
        (response) => {
          console.log(response.json());
          return response.json()
        },
      )
  }

Ошибки браузера:

Failed to load http://mydomian.test/api/refresh: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:4200' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

0
Zione01 31 Дек 2017 в 10:52

2 ответа

Лучший ответ

Я решил эту проблему: Создайте proxy.conf.json в корне приложения Angular. Поместите внутрь объект с маршрутами:

{
  "/api": {
    "target": "http://mydomian.test/",
    "secure": false
  }
}

Я просто определил здесь / api, потому что все мои backend URI находятся внутри api.php. Все вызовы, которые выглядят как http: // localhost: 4200 / api / someitems / 1, будут проксируется на http: //mydomian.test/api/someitems/1.Затем отредактируйте package.json и измените значение start внутри скриптов на ng serve --proxy-config proxy.conf.json. Теперь запуск npm запускается с прокси. Проблема, с которой я столкнулся с этим прокси, заключается в том, что он разрешает ваш URL (http: //mydomian.test/) в IP. Когда он вызывает Laravel только с IP-адресом, сервер nginx не знает, что делать, потому что он должен получить доменное имя. nginx позволяет использовать несколько веб-сайтов на одном IP-адресе, поэтому он должен получить доменное имя или иметь веб-сайт по умолчанию, на который он перенаправляет все вызовы, у которых нет доменного имени. Если это все еще не исправлено в прокси-сервере Angular, перейдите в / etc / nginx / sites-available на машине Laravel, там у вас будет файл конфигурации mydomian.test. Он прослушал 80; там, измените его на прослушивание 80 по умолчанию ;.

Теперь вы можете изменить переменную API_DOMAIN на http: // localhost: 4200 (или удалить все вместе) и отключить CORS .

0
Zione01 3 Янв 2018 в 09:46

Вам не нужны никакие laravel cors. просто поместите этот код в свой файл .htaccess

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.php [QSA,L]

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Credentials true
Header add Access-Control-Allow-Headers "authorization,language,Content-Type"
Header add Access-Control-Allow-Methods "GET,POST,OPTIONS,DELETE,PUT"
0
Giorgi Lagidze 31 Дек 2017 в 19:12