web-dev-qa-db-ja.com

アクセス制御は、Angular 2のOriginの問題を許可します

Node.jsサーバーからのデータの取得に問題があります。

クライアント側は次のとおりです。

    public getTestLines() : Observable<TestLine[]> {
    let headers = new Headers({ 'Access-Control-Allow-Origin': '*' });
    let options = new RequestOptions({ headers: headers });

    return this.http.get('http://localhost:3003/get_testlines', options)
                .map((res:Response) => res.json())
                .catch((error:any) => Observable.throw(error.json().error || 'Server error')); 
}

サーバー側では、ヘッダーも設定します：

resp.setHeader('Access-Control-Allow-Origin','*') 
resp.send(JSON.stringify(results))

しかし、エラーが発生します

「XMLHttpRequestをロードできません http：// localhost：3003/get_testlines 。プリフライトリクエストへの応答がアクセスコントロールチェックに合格しません。リクエストされたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。Origin ' http：// localhost：30 'はアクセスを許可されていません。」

どうすれば修正できますか？ヘッダーを削除すると、このヘッダーが必要であると表示されます。

htmlangularhttp-headers
9
Michal Bialek

_Access-Control-Allow-Origin_は、リクエストヘッダーではなくresponseヘッダーです。

リクエストではなく、レスポンスに表示する必要があります。

あなたはそれを応答に入れようとしました：

_resp.setHeader('Access-Control-Allow-Origin','*') 
_

…しかし、うまくいきませんでした。

これはおそらく、適切な要求への応答にそれを配置していないためです。エラーメッセージは言う：

プリフライトリクエストへの応答は、アクセスコントロールチェックに合格しません

リクエストをプリフライトするためにsomethingを実行しました。これは、ブラウザがGETリクエストを行う前に、OPTIONSリクエストを行っていることを意味します。

これはおそらく、サーバー上の別のコードによって処理されているため、resp.setHeader('Access-Control-Allow-Origin','*')行はヒットしません。

プリフライトリクエストが行われる原因の1つは、リクエストヘッダーの追加です（少数の例外を除く）。 _Access-Control-Allow-Origin_をrequestに追加すると、プリフライトされた要求がトリガーされるため、問題を修正するために最初に行うことはremove _Access-Control-Allow-Origin_リクエストから。

それが失敗した場合、OPTIONSリクエストとGETリクエストに応答できるようにサーバーを設定する必要があります。

8
Quentin

Access-Control-Allow-Originは応答ヘッダーであり、要求ヘッダーではありません。バックエンドで権限を修正する必要があります。そのため、必要なすべての権限を含むcors.jsファイルを作成する必要があります。

function crosPermission(){
  this.permission=function(req,res,next){
    res.header('Access-Control-Allow-Origin','*');
    res.header('Access-Control-Allow-Headers','Content-Type');
    res.header('Access-Control-Allow-Methods','GET','POST','PUT','DELETE','OPTIONS');
    next();
  }
}

module.exports= new crosPermission();

次のステップ app.jsに行を追加する必要があります

    var cors=require('./cors');
    app.use(cors.permission)
2
Bettaibi Nidhal

リクエストにAccess-Control-Allow-Originを設定しないでください。設定する必要はありません。応答にヘッダーが存在するかどうかを再確認する必要があります（開発者コンソールで確認してください）。より多くのバックエンドコードを共有する場合に役立ちます。

1
Mezo Istvan

これが残りのAPIの場合=> http：// localhost：3003/get_testlines

@CrossOrigin（origins = "*"）を使用して、クロスドメインの問題を解決します

0
aabbcc

これはクライアントとは関係ありません。非常に簡単に、CorsをConfigureメソッドに追加することでこの問題を解決できます。このような：

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            InitializeDatabase(app);

            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseMiddleware<ExceptionToResultMiddleware>();

            app.UseSwagger();

            app.UseSwaggerUI(c =>
            {
                c.SwaggerEndpoint("/swagger/v1/swagger.json", "My API V1");
            });

            app.UseCors(s => s.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());  ==> This section

            app.UseMvc();
        }

ここでプロジェクトを再起動して、もう一度確認してください。

0
AmirReza-Farahlagha