Angular 6 HttpClient - Проблемы с CORS

Question

Служба отдыха My Nodejs имеет следующую конечную точку http://localhost:3000/api/countries. Я использую это промежуточное программное обеспечение https://github.com/expressjs/cors. У меня включены таким образом cors: -

const cors = require('cors');
app.use(cors({
  'allowedHeaders': ['sessionId', 'Content-Type'],
  'exposedHeaders': ['sessionId'],
  'origin': '*',
  'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
  'preflightContinue': false
}));

В моем приложении Angular 6, размещенном по адресу * 1009, следующий код:

   import { HttpClient, HttpHeaders } from '@angular/common/http';

   httpClient: HttpClient;

   getCountries(): Observable<any> {
     const url = 'http://localhost:3000/api/countries';
     const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin':'*'
      })
     };
     return this.httpClient.get(url, httpOptions).pipe(
        map((result: any) => {
            return result;
        })
     );
   }

У меня есть следующий код в моем приложении React на

http://localhost:3001

getCountries() {
    const url = 'http://localhost:3000/api/countries';
    const init = {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
   };

   try {
    const response = await fetch(url, init);
    const json = await response.json();
    return json
   };
 }

Мой код реакции отлично работает, давая желаемый ответ, но Angular 6 выдает следующую ошибку: -

Доступ к XMLHttpRequest по адресу http://localhost:3000/api/countries' из origin 'http://localhost:4200' заблокирован политикой CORS: Поле заголовка запроса access-control-allow-origin не разрешено Access-Control-Allow-Headers в предполетном ответе.

Что я делаю не так в коде angular 6?

Обратите внимание, что я видел ответы на похожие вопросы, предлагающие использовать файл json (proxy.conf.json) для работы в качестве прокси-сервера или установки расширения chrome. Это не варианты для меня.

Заранее спасибо за ваши полезные ответы.

Answer 1

Как говорит ошибка, заголовок Access-Control-Allow-Origin не разрешен в запросе. Удалите заголовок из угловых заголовков http.Access-Control-Allow-Origin должен быть установлен только со стороны сервера.

Answer 2

Вы можете использовать это , если вы хотите быстрое временное решение.

const url = 'https://cors-anywhere.herokuapp.com/http://localhost:3000/api/countries';