Angular5のヘッダーにCORSリクエストを追加する方法

ヘッダーに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 'はアクセスを許可されていません

失敗：（不明なURL）のHTTP失敗応答：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コマンドを変更しました。

"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モードを試すこともできます。Angularの組み込みhttpモジュールよりも設定が簡単な場合があります。Chrome開発ツールの[ネットワーク]タブでリクエストを右クリックして、フェッチ構文でコピーできます。これはすばらしいことです。

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ゲートウェイサーバーを使用していて、192.168.0.xxのようなIPにGETリクエストを行うと、確実にCORSエラーが発生します。

残念ながら、Angularソリューションを見つけることができませんでしたが、以前のリプレイの助けを借りてソリューションを入手し、Angular 7 89の更新バージョンを投稿しています。

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
        }
      ));
  }

いつものように購読するだけです。

NG5のHttpClientのヘッダーを次のようにします。

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

あなたはあなたのローカルホストURLでAPI呼び出しをすることができるでしょう、それは私のために働きます..

• ヘッダーに列になっているparamsを忘れないでください：params：new HttpParams（）。set（ 'program_id'、this.program_id）など

Angular 6のhttpClientを使用したPOSTも、OPTIONSリクエストを実行していました。

ヘッダー一般：

リクエストURL：https：//hp-probook/perl-bin/muziek.pl/=/postData
リクエスト方法：OPTIONS
ステータスコード：200OK
リモートアドレス：127.0.0.1：443
リファラーポリシー：ダウングレード時のリファラーなし

私のPerlRESTサーバーは、リターンコード200でOPTIONSリクエストを実装します。

次のPOSTリクエストヘッダー：

受け入れる：* / *
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
接続：キープアライブ
ホスト：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-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が機能しました！

AngularCorsからrequestoptionsをインポートしてください

    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);
   }  

そして、すべてのAPIリクエストが最初に送信されるバックエンドPHPコードにCORSを追加します。

これを試して、機能しているかどうかを知らせてください。同じ問題が発生しました。angular5からCORSを追加していましたが、機能していませんでした。その後、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'} 
                })