web-dev-qa-db-ja.com

Node.js：POST-リクエストメソッド：OPTIONSステータスコード：403禁止

次の設定があります。

Front end code : REACT (Hosted using express js) (lets call this www.domainA.com)
Backend        : .NET WEB API (Hosted in IIS 7.5) (lets call this www.domainB.com)

FEアプリのドメインは、データとPOSTデータをWebAPIに取得するように要求しています。

GETは完全に機能していますが、データをWeb APIにPOSTしようとすると、次のエラーがスローされます。

Request URL: http://www.domainB.com/api/postdataoperation
Request Method: OPTIONS
Status Code: 403 Forbidden

私は多くのCORS記事を見て、先に進み、次のようにIISでHTTPResponseHeadersを設定しました：

Access-Control-Allow-Methods : POST,GET,OPTIONS,PUT,DELETE
Access-Control-Allow-Origin  : http://www.domainA.com

反応ソリューションからのPOSTリクエストは次のとおりです。

axios.post(`http://www.domainB.com/api/postdataoperation`, {userId});
node.jsexpresspostaxioshttp-status-code-403
9
Murtaza Mandvi

問題は、サーバーが[〜＃〜] options [〜＃〜]リクエストに正しい応答ステータスで応答するように構成されていないことです2xx成功ステータス。

GETは、プリフライトリクエストを行っていないため、機能しています。これは、 CORSドキュメント で定義されている シンプルリクエスト であるという基準を満たしているためです。

一方、POSTリクエストは Preflightedリクエスト であるという基準を満たしています。つまり、プリフライトOPTIONSリクエストを最初に行う必要があります。

つまり、CORS応答ヘッダーを正しく設定しましたが、サーバーはOPTIONSメソッドリクエストの2xx応答（通常は200ステータス）で応答するように構成されていません。

サーバーは、2xxの成功ステータス（通常は200または204）でOPTIONS要求に応答する必要があります。

サーバーがそれを行わない場合、送信するように構成したAccess-Control- *ヘッダーに違いはありません。また、OPTIONSリクエストを正しい方法で処理するようにサーバーを構成する（200または204の成功メッセージを送信する）ための答えは、実行しているサーバーソフトウェアによって異なります。

この回答 からソリューションを借用し、バックエンドの.NET WEBAPIでこれを実行します。

あなたのBaseApiController.cs：

OPTIONShttp動詞を許可するためにこれを行います

public class BaseApiController : ApiController
  {
    public HttpResponseMessage Options()
    {
      return new HttpResponseMessage { StatusCode = HttpStatusCode.OK };
    }
}

参考文献

プリフライトリクエスト

プリフライト403への応答は禁止されています

注意

DomainA.comでnodejsサーバーを実行することは関係ありません。 "axios" ライブラリは、a）ブラウザからXMLHttpRequestsを作成するか、b）node.jsからhttpリクエストを作成するために使用できます。この場合、これが最初のオプションであり、domainBへの「axios.post」はブラウザからのXMLHttpRequestを介して実行されます。そのため、domainB.comでプリフライトリクエストを取得します。。

4
Jannes Botis

Jannes Botisからの回答は、プリフライトメカニズムをよく説明しています。 Node.js/Expressでこの問題を解決するために使用しているコードを追加しているだけです

const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://www.domainA.com');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, DELETE, OPTIONS');
  res.setHeader(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept, Authorization'
  );
  next();
});

// All OPTIONS requests return a simple status: 'OK'
app.options('*', (req, res) => {
  res.json({
    status: 'OK'
  });
});

app.get('/', ...);

app.post('/api/postdataoperation', ...);
0
codeKonami

POSTリクエストが失敗した場合の.NETWeb APIからの出力は何ですか？

0
Mina