Я использую 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.
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 .
Вам не нужны никакие 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"
Похожие вопросы
Новые вопросы
angular
Вопросы по Angular (не путать с AngularJS), веб-фреймворку от Google. Используйте этот тег для угловых вопросов, которые не относятся к конкретной версии. Для более старой веб-платформы AngularJS (1.x) используйте тег angularjs.