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

Ответы

Ответ 1

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

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

Ответ 2

По моему опыту плагины работали с 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

Ответ 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 вашего локального хоста, это работает для меня..

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

Ответ 4

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

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

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 реализует запрос OPTIONS с кодом возврата 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 работал для меня!

Ответ 5

попробуйте этот плагин "Allow-Control-Allow-Origin: *"

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?utm_source=chrome-app-launcher-info-dialog

Ответ 6

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

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

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

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

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

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

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

Ответ 7

Вы также можете попробовать функцию fetch и режим no-cors. Иногда мне проще настроить его, чем встроенный в Angular модуль http. Вы можете щелкнуть правой кнопкой мыши запросы на вкладке сети инструментов 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'
    }
  )
);

Ответ 8

angular 2+ в основном создает такую проблему, в то время как ответ от серверного API не является допустимым JSON. Значит, ответ сервера печатается как веб-страница вместо ответа JSON.

Неверный ответ сервера

print $response;

правильный ответ

return $response;

Примечание: я столкнулся с проблемой в угловом приложении. Разработчик использует print для возврата ответа.

Ответ 9

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

      $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'} 
                })

Ответ 10

Используя jsonp...

в приложении, вызывающем API:

import { HttpClient } from "@angular/common/http";

this.httpClient.jsonp("http://127.0.0.1:3001/scicat/Publication", "callback")
...

В вызываемом абоненте:

import { Request, Response } from "express";

// is commonly cross a cross origin request
export let getPublication = (req: Request, res: Response) => {
  logger.debug("Get publications request.");
  const dao = MongoConnector.getInstance();
  dao
    .getPublication(req.query)
    .then(response => {
      Response.jsonp(response);
    })
    .catch(oaiError => {
      Response.status(500);
      Response.jsonp(oaiError);
    });
};