Ошибка CORS при использовании Angular 7 в качестве интерфейса, Backend в качестве Java
Я запускаю два приложения на своем локальном рабочем столе.
Один построен на Java, который служит API, другой построен на Angular, который является интерфейсным приложением.
Я пытаюсь получить доступ к внутренним данным из Angular, и у меня возникает ошибка:
Access to XMLHttpRequest at 'http://localhost:8080' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
public getMethod(): Observable<Availability[]> {
return this.http
.get(API_URL)
.map(response => {
})
.catch(this.handleError);
}
Я делаю что-то подобное в Angular, чтобы получить данные, и ошибка продолжает появляться.
Мой вопрос: это угловая ошибка или ошибка Backend (Java)?
100% ошибка бэкенда. Либо используйте обратный прокси-сервер для размещения вашего API в том же домене, либо отключите заголовки CORS.
Ответы 3
Это ошибка бэкэнда. Вы должны разрешить cors на вашем java-сервере. Проверить это
Простой способ сделать http-запрос локально — установить расширение cors в браузере.
Например, если вы используете Google Chrome, установите его:
Расширение Allow-Control-Allow-Origin
Итак, включите корс, нажав на кнопку, и сделайте запрос :)
Создайте proxy.conf.json в корне вашего проекта рядом с package.json.
Вот пример.
{
"/service/*": {
"target": "http://localhost:8080",
"changeOrigin": true
}
}
Добавьте proxy.conf.json к serveoptions в angular.json. Как в:
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "app:build",
"proxyConfig": "proxy.conf.json"
},
"configurations": {
"production": {
"browserTarget": "app:build:production"
}
}
}
Вот и все. Просто ng serve как вы обычно делаете, и вы можете начать проксировать на свой сервер. Убедитесь, что вы не предлагаете host url вручную в своих http звонках. Просто запросите у /service.
какой фреймворк вы используете в своем бэкенде?