Заголовок 'Access-Control-Allow-Origin' имеет значение 'http://localhost:4200', которое не равно предоставленному источнику

Question

(продолжение сообщения об ошибке в заголовке). "Origin 'http://127.0.0.1:4200', следовательно, доступ запрещен."

Мне не удается запустить один и тот же сайт Angular 5 в двух разных доменах при работе с одним и тем же API.

Это сообщение об ошибке исходит от Chrome. Ошибка в Firefox:

Запрос перекрестного источника заблокирован: та же политика происхождения запрещает чтение удаленного ресурса в http://myapitest.local/v1/subscription/current/products. (Причина: заголовок CORS ‘Access-Control-Allow-Origin’ не совпадает с ‘http://127.0.0.1:4200’)

Я заметил это, работая над белой версией нашего приложения Angular, которое будет работать по альтернативному URL из нашего обычного приложения, но все еще использующего тот же API Laravel, работающий по тому же URL. Я добавил соответствующую конфигурацию CORS в Laravel, похоже, это проблема браузера - не знаю, как ее обойти.

Я пересоздал это на локальном хосте, изменив, например, localhost: 4200 на 127.0.0.1:4200.

Как ни странно, предпечатная проверка кажется успешной с правильными заголовками CORS.

Однако в GET он, похоже, возвращается с заголовком WRONG Access-Control-Allow-Origin в ответе.

Стоит отметить, что изменение моих разрешенных источников в API для разрешения всех ('*') не решает эту проблему.

Я не уверен, какую другую информацию или код я мог бы предоставить, чтобы сделать это более понятным. Спасибо.

Answer 1

Проблема в отображении имени. Поскольку пул серверов может иметь несколько IP-адресов, большинство браузеров отображают IP-адрес на имя. Обычно это делается через запрошенное DNS-имя. В вашем случае нет имени, поэтому он ищет вверх IP-адрес в файле hosts (/ etc / hosts в Linux или C: \ Windows \ System32 \ Drivers \ etc \ Hosts в Windows) и возвращение имени оттуда.

Поскольку вам нужно проводить тестирование между доменами (выступать в качестве 2-х отдельных серверов), добавьте строку в файл hosts, указав myapitest.local на 127.0.0.2. И строка myapitest2.local для 127.0.0.3. Это позволит вашим локальным именам соответствовать IP-адресам и с правильной конфигурацией (указав конкретный адрес прослушивания для привязки, для каждого экземпляра сервера) каждый экземпляр сервера может затем работать на порту 80.

Использовать имена во всех запросах и разрешениях кросс-происхождения.

Редактировать

Подстановочный знак не работает из-за Access-Control-Allow-Credentials: true.

На сервере dev-api.ourdomain.com: Добавьте заголовок ответа в файл маршрута Routes / api.php, который создает заголовок Access-Control-Allow-Origin: для утвержденных доменов. Вы также можете применить это как Middleware, но для простоты я продемонстрирую на простых маршрутах. Это также необходимо сделать для предполетных маршрутов.

Route::get('/method/{id}', function (Request $request, $id) {
    $retval = method($id);
    $origin_allowed = $request->header('HTTP_ORIGIN');
    $allowed = array("dev.ourdomain.com", "dev.alternatedomain.com");
    if(in_array($origin_domain, $allowed))
        return ($retval)->header('Access-Control-Allow-Origin:',$origin_domain);
    else 
        return "Unauthorized";
});

Это просто пример кода для демонстрации концепции.

Убедитесь, что вы очищаете авторизацию HTTP и токены csrf при выходе из системы.

Answer 2

Настройка обратного прокси-сервера и настройка путей для обоих доменов.
Руководство по Nginx

Это позволит вам получить доступ ко всему через http://localhost/
Давайте предположим:
A -> Angular App (localhost: 4200)
B -> API другого вашего домена (myapitest.local)

Пример потока:
- Запрос браузера (http://localhost/angular) -> Nginx -> A
- Загрузить данные из бэкэнда -> Nginx -> B

Таким образом, с помощью Nginx вы сможете получить доступ к «А» с http://localhost/ и "B" также от http://localhost/
Поскольку источник один и тот же, ошибки CORS не будет.

Answer 3

Давайте предположим, что ваш API работает на 8080, а ваш угловой код на 4200.

В вашем угловом приложении создайте файл с именем proxy.conf.json

{
    "/api/": {
        "target": "http://localhost:8080/",
        "secure": false,
        "changeOrigin": true
    }
}

Запустите угловое приложение с помощью этой команды

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

При такой конфигурации, когда вы вызываете localhost: 4200 / api, вам будет звонить 8080, и не будет ошибки CORS

Answer 4

я думаю, что вы используете web.php для этих маршрутов в верхней части файла, пожалуйста, используйте это и попробуйте

 <?php
  header('Access-Control-Allow-Origin: *');
  header('Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE');
  header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization, X-CSRF-Token");

Route::get('/login', 'Auth\LoginController@showLoginForm');

Answer 5

Вы можете установить прокси для запроса, предоставленного сервером разработки угловых веб-пакетов. Используя прокси-сервер, вы можете изменить внутренний URL-адрес, полученный из размещенного в угловом домене URL-адреса. Это будет достигнуто с помощью - proxy-config в вашей команде serve или package.json. так что angular будет работать в разных URls с одинаковым бэкэнд-сервисом.

добавьте файл с именем proxy.conf.json рядом с package.json. из вашего запроса получите URL add / proxy

В вашем файле proxy.conf добавьте это

{
  "/proxy": {
  "target": "http://localhost:3000",
  "secure": false,
  "pathRewrite": {
  "^/proxy": ""
 }
}

изменить команду подачи на

ng serve --proxy-config proxy.conf.json --port 4200 --host 0.0.0.0

или

в вашем angular.json измените цель подачи

"architect": {
    "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
    "browserTarget": "your-application-name:build",
    "proxyConfig": "proxy.conf.json"
 },

Примечание. Обязательно добавьте / proxy в URL-адрес службы Http и конфигурацию Proxy только для целей разработки

Для производственной среды. Необходимо настроить на веб-серверах.

Answer 6

добавьте это в ваш public/index.php файл

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