Як додати запит 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'. Таким чином, вихідний файл ' 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 файлом в тому ж каталозі.

Потім я змінив команду start у файлі 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 за допомогою адреси localhost, це працює для мене ..

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

POST з httpClient в Angular 6 також робив запит OPTIONS:

Загальні заголовки:

URL-адреса запиту: https: //hp-probook/perl-bin/muziek.pl/=/postData
Метод запиту: ВАРІАНТИ
Код стану: 200 OK
Віддалена адреса: 127.0.0.1: 443
Політика перенаправлення: no-referrer-when-downgrade

Мій сервер 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
Access-Control-Request-Headers: тип вмісту
Метод доступу-контролю-запиту: POST
Зв'язок: підтримувати життя
Ведучий: hp-probook
Походження: http: // localhost: 4200
Реферер: http: // localhost: 4200 /
User-Agent: Mozilla / 5.0 (X11; Linux x86_64) AppleWebKit / 537.36 (KHTML, як Gecko) Chrome / 59.0.3071.109 Safari / 537.36

Повідомлення Заголовки контролю доступу-запиту: тип вмісту.

Отже, мій сценарій серверної служби perl використовує такі заголовки:

 - "Access-Control-Allow-Origin" => '*',
 - "Access-Control-Allow-Methods" => 'ОТРИМАТИ, ВСТАНОВИТИ, ВИТРИТИ, ВИДАЛИТИ, ВСТАНОВИТИ, ВАРІАНТИ',
 - "Access-Control-Allow-Headers" => 'Походження, Тип вмісту, X-Auth-Token, тип вмісту',

За допомогою цього налаштування 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'} 
                })