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

авил 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: // локальный: 4200Поэтому не допускается доступ

fail: Http error response (неизвестный 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');
 Sachila Ranawaka17 нояб. 2017 г., 08:32
опубликовать этот файл сервера
 Sachila Ranawaka17 нояб. 2017 г., 08:27
Нужно добавить заголовки Cors на стороне сервера.
 Aman Kumar17 нояб. 2017 г., 08:28
@SachilaRanawaka Да, я добавил его в свой индексный файл.

Ответы на вопрос(7)

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

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 работал для меня!

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

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

но не с последним 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

 Jinna Balu24 янв. 2018 г., 06:42
Будет ли это работать для Angular Universal
 GVArt10 июл. 2018 г., 16:02
Это работает только для целей разработки. Вы не можете создать свое приложение с этим прокси
 Santoshraju V02 янв. 2018 г., 13:29
я пробовал это, но это не работает в моей системе

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)

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

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

print $response;

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

return $response;

Запись: Я столкнулся с проблемой в угловом приложении. Разработчик использует печать, чтобы вернуть ответ.

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

      $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'} 
                })
Решение Вопроса

«Я приму ваш запрос, даже если вы пришли из другого источника». Это требует сотрудничества с сервера - поэтому, если вы не можете изменить сервер (например, если вы используете внешний API), этот подход не сработает.

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

 Abhishek Singh15 мар. 2019 г., 16:23
Я думаю, что браузер (не сервер) отклоняет запрос, если он не видит этот заголовок. поправь меня если я не прав

Ваш ответ на вопрос