angular метод get всегда переходит к ошибочной части

Question

Пишу заявку в angular с java. Здесь я пишу метод get в angular, он переходит во внешний интерфейс, а внутренняя служба java возвращает список объектов. Но метод angular get напрямую переходит к части ошибки.

Java service: -

    @GetMapping(value = "/getStatusMails")
    public ResponseEntity<Object> getStatusMails() {
        List<Dto> status= sercice.getStatusMails(123);
        return new ResponseEntity<Object>(status, HttpStatus.OK);
    }

angular get метод: -

    this.httpClient.get<any>('http://IP:8090/getStatusMails').subscribe(
    data => this.elements = data,
    error => console.error('There was an error!', error))

Я тестировал с почтальоном, он получает правильный список объектов.

Моя ошибка консоли: -

Access to XMLHttpRequest at 'http://IP:8090/getStatusMails' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
zone-evergreen.js:2845 GET http://IP:8090/getStatusMails net::ERR_FAILED
core.js:6241 ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "http://IP:8090/getStatusMails", ok: false, …}

Если я напишу свой код, как показано ниже

const url = "http://IP:8090/getStatusMails"; // site that doesn’t send Access-Control-*
    fetch(url)
    .then(response => response.text())
    .then(contents => console.log(contents))
    .catch(() => console.log("Can’t access " + url + " response. Blocked by browser?"))
}

На моей консоли я получаю консоль, например Can’t access http://IP:8090/getStatusMails response. Blocked by browser? Когда я нажимаю на свой URL-адрес в журнале, я могу увидеть результат в другое окно.

введите описание изображения здесь

Answer 1

Код ошибки Http 0 вызван CORS : ваше приложение Angular размещено на другом хосте, чем ваше приложение Java, и запросы XHR запрещены.

Чтобы решить эту проблему , вы можете использовать обратный прокси-сервер (рекомендуется) или добавить HTTP-заголовки контроля доступа на свой сервер.

Использование обратного прокси-сервера

Во время разработки

Создать proxy.json файл в той же папке, что и ваш package.json:

{
    "/getStatusMails": {
        "target": "http://IP:8090",
        "secure": false,
        "changeOrigin": true
    }
}

И запустите свой Angular dev-сервер с --proxy-config proxy.json:

ng serve --proxy-config proxy.json

Теперь вместо отправки запроса на http://IP:8090/getStatusMails, вы можете просто запросить /getStatusMails.

Если у вас несколько сервисов, вы можете определить для них общий префикс (например, /api или /rest):

• /api/getStatusMails
• /api/getUsers

(хотя я бы рекомендовал следовать соглашениям об именах REST ).

А затем настройте прокси используя префикс:

{
    "/api": {
        "target": "http://IP:8090",
        "secure": false,
        "changeOrigin": true
    }
}

В производственной среде вам нужно либо развернуть все на одном сервере Java, либо вам необходимо настроить обратный прокси на своем веб-сервере (Apache Httpd или Nginx).

Apache Httpd

Вы должны включить mod_proxy, а затем вы можете настроить это с ProxyPass и ProxyPassReverse:

ProxyPass         "/getStatusMails" "http://IP:8090/"
ProxyPassReverse  "/getStatusMails" "http://IP:8090/"

Вы можете найти дополнительную информацию в Apache Http-документации .

Nginx

Использование свойства proxy_path:

location /getStatusMails {
    proxy_pass http://IP:8090/;
}

Дополнительную информацию можно найти в документации Nginx .

Использование HTTP-заголовков контроля доступа

В этой конфигурации веб-браузер пользователя отправит запрос OPTION перед отправкой реального запроса XHR.

Ваше приложение Java должно отправлять заголовки Access-Control-Allow-Origin и Access-Control-Allow-Methods, чтобы разрешить запросы из разных источников.

Например, во время разработки вы можете отправить:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST

Чтобы разрешить запросы GET и POST с любых URL-адресов.

В производстве вы никогда не должны использовать * и всегда укажите реальный URL-адрес вашего интерфейса.

Поскольку вы, похоже, используете Spring, вы можете просто аннулировать Укажите в своем методе @CrossOrigin для отправки этих заголовков. Дополнительную информацию об этом можно найти в документации Spring .

Answer 2

Это ошибка CORS.

Это происходит, когда ваш клиент работает на другом сервере, чем сервер бэкэнда.

так почему этого не происходит в Postman?

• почтальон предназначен для разработки и не имеет встроенных проверок происхождения

почему это происходит в браузере?

• браузеры проверяют происхождение, чтобы предотвратить атаки CSRF.

Решение вашей проблемы - добавить URL-адрес вашего клиента в 'Allow-Acess-Control_origin' на стороне вашего сервера. проверьте this , чтобы узнать, как это сделать.

вы можете либо установить 'Allow-Acess-Control_origin' на *, (принимать все соединения), либо указать URL-адрес клиента

Answer 3

Добавление аннотации @CrossOrigin к контроллеру в службе Java должно решить вашу проблему.

@CrossOrigin
@GetMapping(value = "/getStatusMails")
    public ResponseEntity<Object> getStatusMails() {
        List<Dto> status= sercice.getStatusMails(123);
        return new ResponseEntity<Object>(status, HttpStatus.OK);
    }