ВИПРАВЛЕННЯ: У Angular немає помилки заголовка access-control-allow-origin

Одне з найпоширеніших повідомлень про помилки, з яким розробники Angular можуть зіткнутися у своїй повсякденній роботі: на запитуваному ресурсі немає заголовка access-control-allow-origin.

Це не конкретна проблема Angular, а CORS (Проблема заголовка Cross-Origin Resource Sharing). Це може означати, що внутрішній сервер налаштований на роботу з іншим портом або доменом.

---

Як виправити помилку контролю доступу не в Windows 10?

1. Вносити зміни на рівні сервера

Якщо у вас є доступ до сервера, увімкніть запити CROS, додавши Access-Control-Allow-Origin: * заголовок. Після цього налаштуйте корси запис, під system.webServer в web.config файл, як у прикладі нижче.

• ”1.0″?
• увімкнено ="Правда">
• походження =“ https://someorigin.domain.com”>
• метод =“ОТРИМАТИ”/>
• метод ="ГОЛОВА"/>
• </system.webServer>

Ось, корси дозволить ОТРИМАТИ і ГОЛОВА запити від https://someorigin.domain.com/.

Крім того, якщо ви використовуєте IIS (Інтернет-інформаційні послуги) вам потрібно буде завантажити Модуль IIS CORS.

Будьте обережні, замість * вкажіть домен або список доменів. В іншому випадку перехресні запити на сервер будуть увімкнені з будь-якого місця.

Увімкнено Апачі, у файлі конфігурації потрібно додати рядок Набір заголовків Access-Control-Allow-Origin ‘*’. Знову ж таки, розумно замінити «*» списком джерел, звідки будуть надходити запити.

---

2. Запустіть власний проксі-сервер

1. По-перше, ми створимо файл конфігурації проксі-сервера у кореневій папці Angular, який називається src / proxy.conf.json, і напишіть в ньому такий код:
   • {"/ api":
   • "target": " http://localhost: 6000 "," безпечно ": false}
   • }
2. По-друге, в англular.jsonфайл, додайте файл proxyConfigопція в подавати ціль:
   • "подавати": {
   • "будівельник":" ",
     
   • "варіанти":{"proxyConfig":"src / proxy.conf.json"}
     
   • }
3. Тепер запустіть поточну конфігурацію за допомогою нг подавати команди.

Проксі-сервер пересилає ваші запити на віддалений сервер. Далі ми побачимо, як налаштувати проксі-сервер.

Запити на дані в Angular - це виклики API до localhost, на порту 4200, як це місце:

• http://localhost: 4200 / api / datareq.

Однак у наведеному вище прикладі ми припустили, що запитувані дані знаходяться на це місце:

• http://localhost: 6000 / api / datareq.

---

Вас цікавлять хороші проксі-рішення? Ознайомтесь із цим списком спеціальних інструментів

---

3. Dзастосовується та сама політика походження у вашому браузері

Примітка: цей конкретний метод не рекомендується, оскільки це може піддати ваш браузер (і вашу систему) основним ризикам безпеки.

Якщо все інше не працює, ви можете вдатися до вимкнення тієї самої політики походження в браузері. Однак будьте обережні, оскільки це може піддати ваш браузер (і вашу систему) серйозним ризикам безпеки.

Для Гугл хром, у Windows 10 відкрийте Командний рядок як адміністратор і запустіть таку команду:

C: Програмні файли (x86) GoogleChromeApplicationchrome.exe "--disable-web-security --disable-gpu --user-data-dir = ~ / chromeTemp..

На закінчення: на запитуваному ресурсі немає заголовка access-control-allow-origin повідомлення про помилку - це проблема на сервері.

Для розробників Angular зміна конфігурації сервера або використання проксі-сервера повинні працювати нормально.

Розкажіть нам, що ви думаєте про цей посібник, у розділі коментарів нижче.

---

---