Как решить Access-Control-Allow-Origin в приложении angular, используя почтовый запрос httpclient?

Я пытаюсь вызвать URL-адрес данных, используя метод публикации HttpClient, я добавил заголовки вдоль почтового вызова. Но я все еще получаю сообщение об ошибке

from origin 'http://localhost:6200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Но когда я проверяю сети, я вижу метод, показанный как ВАРИАНТЫ вместо сообщения.

Request Method: OPTIONS

Пожалуйста, найдите HTTP-вызов ниже

const headers = new Headers();
headers.append('Access-Control-Allow-Origin','*');
headers.append('Access-Control-Allow-Methods','GET, POST, PATCH, PUT, DELETE, OPTIONS');
headers.append('Access-Control-Allow-Headers','Origin, Content-Type, X-Auth-Token');
headers.append('Content-Type', 'application/json');
let options = new RequestOptions({ headers: headers });
return this.httpClient.post(this.url, options).pipe(map(this.extractData));

Может ли кто-нибудь помочь решить эту проблему, я также добавил файл proxy.config.json ниже

"/sap/*": {
          "target": "http://t1525bms.somecompany.com:8080/sap",
          "secure": false
        }

Таким образом, я также пытался бесполезно.

Заголовки CORS добавляются API, а не внешним интерфейсом. Вы захотите разрешить CORS в своих маршрутах API, чтобы исправить это.

Woohoojin 19.02.2019 07:29

Извините, не смог уловить вашу мысль @ChristianScillitoe

Manoj Kumar 19.02.2019 08:22
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
2
1 038
1

Ответы 1

Вы можете решить свою проблему, установив в своем браузере расширение, которое разрешает CORS в вашем ответном запросе.

Существуют различные решения, которые вы можете найти в интернет-магазине Chrome https://chrome.google.com/webstore/search/cors?hl=ru. Вам нужно только установить расширение, которое вы предпочитаете, и включить его, после чего ваш сайт должен работать нормально.

Это «взлом», который позволяет вам только разрабатывать и тестировать ваш сайт, но этот метод нельзя использовать в производстве.

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

Это единственный способ заставить ваш сайт правильно работать в рабочей среде.

Что касается запроса OPTIONS вместо POST, проблема связана с недопустимыми заголовками, которые вы добавили в свой запрос. Если вам нужна дополнительная информация, вы можете найти их при поиске «предпечатного запроса», связанного с ошибкой CORS.

Другие вопросы по теме