web-dev-qa-db-ja.com

Angular 5のヘッダーに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」ヘッダーがありません。 Origin ' http：// localhost：42 'はアクセスを許可されていません

失敗：（不明な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');
angularangular5
53
Aman Kumar

CORS（Cross-Origin Resource Sharing）は、サーバーが「あなたが別のオリジンから来たとしても、リクエストを受け入れます」と言う方法です。これにはサーバーからの協力が必要です。したがって、サーバーを変更できない場合（外部APIを使用している場合など）、このアプローチは機能しません。

サーバーを変更してヘッダーAccess-Control-Allow-Origin：*を追加し、どこからでもクロスオリジンリクエストを有効にします（または*ではなくドメインを指定します）。

35
Navoneel Talukdar

私の経験では、プラグインは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を使用する必要があります

35
rgantla

POST 6のhttpClientでAngularもOPTIONSリクエストを実行していました：

ヘッダー全般：

リクエストURL：https：//hp-probook/Perl-bin/muziek.pl/=/postData 
リクエストメソッド：OPTIONS 
ステータスコード：200 OK 
リモートアドレス：127.0.0.1：443 
参照ポリシー：no-referrer-when-downgrade

私のPerl RESTサーバーは、戻りコード200でOPTIONS要求を実装します。

次の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、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がうまくいきました！

2
Rob Lassche

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：new HttpParams（）。set（ 'program_id'、this.program_id）などのように、ヘッダーにカラムされたパラメーターを決して忘れないでください。
2
Damon Wu

angular corsから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);
   }

バックエンドPHPコードにCORSを追加します。ここで、すべてのAPIリクエストが最初に到着します。

これを試して、それが機能しているかどうかを教えてください同じ問題がありました。私はangular5からCORSを追加していました

1
raj yadav

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'
    }
  )
);
1
metakermit

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

何時間も試した後、次のことがうまくいきました

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