Как добавить запрос 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', []))
    );
}

ошибка:

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

failed: Http failure response for (unknown 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');
17
angular angular5

6 ответов

CORS (Cross-Origin Resource Sharing) - это способ для сервера сказать: "я приму ваш запрос, даже если вы пришли из другого источника."Это требует сотрудничества с сервером – поэтому, если вы не можете изменить сервер (например, если вы используете внешний API), этот подход не будет работать.

измените сервер, чтобы добавить заголовок Access-Control-Allow-Origin: * чтобы включить перекрестные запросы из любого места (или указать домен вместо *).

15

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

подробнее об этом здесь.

:

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

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

затем я изменил команду start в пакет.файл 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

16

пожалуйста, импортируйте requestoptions из angular cors

    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 для бэкэнда, и это сработало для меня

3

сделайте заголовок похожим на этот для 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, он работает для меня ..

  • пожалуйста, не забывайте свои параметры columnd в заголовке: например, params: new HttpParams ().set ('program_id', this.program_id)
2
1

сообщение с httpClient в Angular 6 также выполняло запрос опций:

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

Request URL:https://hp-probook/perl-bin/muziek.pl/=/postData
Request Method:OPTIONS
Status Code:200 OK
Remote Address:127.0.0.1:443
Referrer Policy:no-referrer-when-downgrade

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

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

Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4
Access-Control-Request-Headers:content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:hp-probook
Origin:http://localhost:4200
Referer:http://localhost:4200/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.109 Safari/537.36

уведомление Access-Control-Request-Headers: content-type.

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


 -"Access-Control-Allow-Origin" => '*',
 -"Access-Control-Allow-Methods" => 'GET,POST,PATCH,DELETE,PUT,OPTIONS',
 -"Access-Control-Allow-Headers" => 'Origin, Content-Type, X-Auth-Token, content-type',

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

1