私は、JSアプリの axios ライブラリで使用しているASP.NET 5 Web API(まあ、とにかくMVC)バックエンドを持っています。
MVCのCORS構成は次のとおりです。
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
services.AddCors();
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
app.UseCors(builder => {
builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader();
});
}
つまり、言い換えれば、可能な限りすべてのリクエストを許可する必要があります。ただし、この固定されたプリフライトリクエストの間、POSTリクエストは依然として拒否されます(サーバーで実行されていることがわかりますが、応答にヘッダーがないため、クライアント側のエラーが発生します)。
これがうまくいかない理由は誰にもありますか?
これらは、MVC apiによって返されるヘッダーです。
問題は、実際にPOST要求を処理するアクションに例外があり、Norgermanが述べたように、デフォルトの例外ハンドラーがCORSヘッダーをクリアしたという事実にありました。
MVCの前にCorsを追加する必要があります。ミドルウェアの登録順序は重要です。 Corsがmvcの後に登録されている場合は呼び出されません。登録順に呼び出されます。
Corsがリクエストを処理すると、次のミドルウェア(Mvc)に渡されます
これは私にとってはうまくいきます:
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
app.UseCors(x => x.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader().AllowCredentials());
}
@Norgermanはコメントでこれについて言及しましたが、私はこの間違いを自分で犯したので、答える価値があると思いますseveral回:
CORSミドルウェアは実際のクロスドメインリクエストでのみ機能します
ブラウザにURLを入力するなど、同じドメインリクエストにアクセスするだけの場合はnotが発生します。
つまり、テストする場合は、別のポートまたはドメインのXHRクライアントからの実際のクロスドメインリクエスト、またはHTTPリクエストにOrigin
ヘッダーを明示的にポークできるHTTPクライアントを使用する必要があります。
あなたが本当にパブリックなエンドポイントを作成しようとしていると仮定すると、これは私にとってうまくいきました:
これを確認してください:
app.UseCors(builder => {
builder.AllowAnyOrigin()
builder.AllowAnyMethod()
builder.AllowAnyHeader()
});
次のいずれかの前に発生します:
app.UseHttpsRedirection();
app.UseDefaultFiles();
app.UseStaticFiles();
app.UseCookiePolicy();
app.useMvc();
覚えておいてください、私たちは「パイプライン」を扱っています。 corsのものを最初にする必要があります。
また-(ここでも、「パブリックエンドポイント」と仮定しています)-XHR呼び出しが... xhr.withCredentials = false;
...または単に省略します。 「true」に設定すると、「ワイルドカード」に関するCORS警告が表示されます。
CORSでaxiosと同じ問題を抱えていたので、これがうまくいきました。
APIを正しく設定し、APIコントローラのクラスを次のように装飾したと仮定します。
[EnableCors("YourCorsPolicy")]
(クラスにも "using Microsoft.AspNetCore.Cors;"というステートメントを追加する必要があります)
次に、axios-auth.jsファイルで以下を使用する必要があります。
axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*'
これで、httpsでうまくいきました。これは、ガイドが必要な場合の完全なaxios-authです。
import axios from 'axios'
const instance = axios.create({
baseURL: 'https://localhost:56799/api'
})
axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*'
axios.defaults.headers.get['Accepts'] = 'application/json'
axios.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8'
export default instance
これがお役に立てば幸いです。
UseHttpsRedirectionを使用している場合は、アプリがhttpのURLではなくhttpsのURLを呼び出していることを確認してください。呼び出さないと、Accept-Header-Allow-Originヘッダーが返されてもCORSエラーが発生します。