Angularを使用してフロントエンドアプリケーションを開発しようとしています。 認証ヘッダーをHTTP POSTおよびGETリクエストに追加したので、405メソッドは許可されていません、サーバー側ですべてを許可しているようですが。
私のブラウザのデバッガはChromeはAccess-Control-Request-Method: POST
とAccess-Control-Request-Headers: authorization
を要求していると言っています、私のバックエンドはaccess-control-allow-methods: GET, POST
とaccess-control-allow-headers: authorization
の両方も許可しますaccess-control-allow-credentials: true
として。
ここで何が欠けているのかわかりません。サーバーはnode.jsExpressサーバーであり、ヘッダーは次のように設定されます。
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
res.setHeader('Access-Control-Allow-Credentials', 'true');
res.setHeader('Access-Control-Allow-Headers', 'authorization');
フロントエンドコード(Angular 5)は次のようになります。
this.http.request('post', apiUrl, {
headers: new HttpHeaders().set('Authorization', 'Bearer abc'),
}).subscribe(response => {
// some code
});
ここで、this.http
はAngularのHttpClient
のインスタンスです。
フロントエンドアプリケーションはローカルホストドメイン " http://frontend.localhost/app "から提供され、バックエンドサーバーは " http://backend.localhost "にあります。 。
私の質問は、バックエンドに設定する必要のあるヘッダーがいくつか不足しているのですか?フロントエンドアプリケーションでいくつかのオプションを設定する必要がありますか?
私の問題はnotではなくCORSに直接関係していることがわかりました。私のバックエンドは現在GraphQLサーバーのみであり、GETおよびPOSTリクエストを許可します。
クライアント側でヘッダーを追加すると、ブラウザはプリフライト[〜#〜] options [〜#〜]リクエストを介してCORSをチェックしています。 GraphQLサーバーが存在するURLへ。これにより、405メソッドが許可されませんGraphQLサーバーによって生成されたエラー、Expressまたはブラウザーではありません。