Как добавить запрос CORS в заголовок в Angular 5

Я добавил CORS в заголовок, но в моем запросе все еще возникает проблема CORS. Как правильно добавлять и обрабатывать CORS и другие запросы в заголовках?

Вот код служебного файла:

import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http';
const httpOptions = {
  headers: new HttpHeaders({ 
    'Access-Control-Allow-Origin':'*',
    'Authorization':'authkey',
    'userid':'1'
  })
};

public baseurl = 'http://localhost/XXXXXX';

userAPI(data): Observable<any> {
  return this.http.post(this.baseurl, data, httpOptions)
    .pipe(
      tap((result) => console.log('result-->',result)),
      catchError(this.handleError('error', []))
    );
}

Ошибка:

Ответ на предполетный запрос не проходит проверку контроля доступа: в запрошенном ресурсе отсутствует заголовок Access-Control-Allow-Origin. Origin ' http: // localhost: 4200 ' поэтому не имеет доступа

не удалось: ответ об ошибке HTTP для (неизвестный URL): 0 Неизвестная ошибка

В моем серверном коде я добавил CORS в индексный файл.

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

По моему опыту, плагины работали с HTTP, но не с последней версией httpClient. Кроме того, настройка заголовков ответов CORS на сервере не была вариантом. Итак, я создал proxy.conf.jsonфайл, который действует как прокси-сервер.

Подробнее об этом читайте здесь .

proxy.conf.json файл:

{
  "/posts": {
    "target": "https://example.com",
    "secure": true,
    "pathRewrite": {
    "^/posts": ""
  },
    "changeOrigin": true
  }
}

Я поместил proxy.conf.jsonфайл рядом с package.jsonфайлом в том же каталоге.

Затем я изменил команду запуска в файле package.json:

"start": "ng serve --proxy-config proxy.conf.json"

HTTP-вызов из моего компонента приложения:

return this._http.get('/posts/pictures?method=GetPictures')
.subscribe((returnedStuff) => {
  console.log(returnedStuff);
});

Наконец, чтобы запустить мое приложение, мне пришлось бы использовать npm startилиng serve --proxy-config proxy.conf.json

Вы также можете попробовать fetchфункцию и no-corsрежим. Иногда мне легче настроить его, чем встроенный http-модуль Angular. Вы можете щелкнуть запросы правой кнопкой мыши на вкладке сети инструментов Chrome Dev и скопировать их в синтаксисе выборки, что отлично.

import { from } from 'rxjs';

// ...

result = from( // wrap the fetch in a from if you need an rxjs Observable
  fetch(
    this.baseurl,
    {
      body: JSON.stringify(data)
      headers: {
        'Content-Type': 'application/json',
      },
      method: 'POST',
      mode: 'no-cors'
    }
  )
);

Если вы похожи на меня, и вы используете локальный сервер SMS-шлюза и делаете запрос GET на IP-адрес, например 192.168.0.xx, вы обязательно получите ошибку CORS.

К сожалению, мне не удалось найти решение для Angular, но с помощью предыдущего воспроизведения я получил свое решение и публикую обновленную версию для Angular 7 8 9

import {from} from 'rxjs';

getData(): Observable<any> {
    return from(
      fetch(
        'http://xxxxx', // the url you are trying to access
        {
          headers: {
            'Content-Type': 'application/json',
          },
          method: 'GET', // GET, POST, PUT, DELETE
          mode: 'no-cors' // the most important option
        }
      ));
  }

Просто подпишитесь как обычно.

Сделайте так, чтобы заголовок HttpClient в NG5 выглядел так:

let httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'apikey': this.apikey,
        'appkey': this.appkey,
      }),
      params: new HttpParams().set('program_id', this.program_id)
    };

Вы сможете сделать вызов api с вашим URL-адресом localhost, у меня это работает ..

• Никогда не забывайте столбец params в заголовке: например, params: new HttpParams (). Set ('program_id', this.program_id)

POST с httpClient в Angular 6 также выполнял запрос OPTIONS:

Общие заголовки:

URL-адрес запроса: https: //hp-probook/perl-bin/muziek.pl/=/postData
Метод запроса: OPTIONS
Код состояния: 200 ОК
Удаленный адрес: 127.0.0.1: 443
Политика реферера: без реферера при понижении рейтинга

Мой сервер Perl REST реализует запрос OPTIONS с кодом возврата 200.

Заголовок следующего запроса POST:

Принять: * / *
Принятие кодировки: gzip, deflate, br
Accept-Language: nl-NL, nl; q = 0,8, en-US; q = 0,6, en; q = 0,4
Заголовки-запроса-контроля доступа: тип-содержимого
Метод-запроса-контроля доступа: POST
Подключение: keep-alive
Хост: hp-probook
Происхождение: http: // localhost: 4200
Ссылка: http: // localhost: 4200 /
Пользовательский агент: Mozilla / 5.0 (X11; Linux x86_64) AppleWebKit / 537.36 (KHTML, как Gecko) Chrome / 59.0.3071.109 Safari / 537.36

Обратите внимание на заголовки Access-Control-Request: тип-содержимого.

Итак, мой внутренний скрипт на Perl использует следующие заголовки:

 - "Access-Control-Allow-Origin" => '*',
 - "Access-Control-Allow-Methods" => 'GET, POST, PATCH, DELETE, PUT, OPTIONS',
 - "Access-Control-Allow-Headers" => 'Источник, Content-Type, X-Auth-Token, content-type',

С этой настройкой у меня работали GET и POST!

пожалуйста, импортируйте запросы из угловых коров

    import {RequestOptions, Request, Headers } from '@angular/http';

и добавьте параметры запроса в свой код, как показано ниже

    let requestOptions = new RequestOptions({ headers:null, withCredentials: 
    true });

вариант отправки запроса в вашем запросе API

фрагмент кода ниже-

     let requestOptions = new RequestOptions({ headers:null, 
     withCredentials: true });
     return this.http.get(this.config.baseUrl + 
     this.config.getDropDownListForProject, requestOptions)
     .map(res => 
     {
      if(res != null)
      { 
        return res.json();
        //return true;
      }
    })
  .catch(this.handleError);
   }  

и добавьте CORS в свой внутренний PHP-код, где сначала будут выполняться все запросы api.

попробуйте это и дайте мне знать, работает он или нет, у меня была такая же проблема, я добавлял CORS из angular5, который не работал, затем я добавил CORS в бэкэнд, и это сработало для меня

Следующее сработало для меня после нескольких часов попыток

      $http.post("http://localhost:8080/yourresource", parameter, {headers: 
      {'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' } }).

Однако следующий код не сработал, я не понимаю, почему, надеюсь, кто-то может улучшить этот ответ.

          $http({   method: 'POST', url: "http://localhost:8080/yourresource", 
                    parameter, 
                    headers: {'Content-Type': 'application/json', 
                              'Access-Control-Allow-Origin': '*',
                              'Access-Control-Allow-Methods': 'POST'} 
                })