私がやろうとしていること
Azure Free Plan (でホストされているバックエンドのASP.Net Core Web APIがあります).Net Core にデフォルトのセキュリティ ヘッダーを追加する)。
また、その API を使用するクライアント Web サイトもあります。クライアント アプリケーションは Azure ではなく、Github Pages またはアクセスできる別の Web ホスティング サービスでホストされます。このため、ドメイン名が一致しません。
これを調べてみると、Web API 側で CORS を有効にする必要がありますが、数時間にわたってあらゆることを試しましたが、うまくいきません。
クライアントの設定方法これはReact.jsで書かれた単純なクライアントです。JqueryのAJAXを介してAPIを呼び出しています。Reactサイトは機能しているので、それが原因ではないことはわかっています。Jquery API呼び出しは、試行1で確認したとおりに機能します。呼び出し方法は次のとおりです。
var apiUrl = "http://andrewgodfroyportfolioapi.azurewebsites.net/api/Authentication";
//alert(username + "|" + password + "|" + apiUrl);
$.ajax({
url: apiUrl,
type: "POST",
data: {
username: username,
password: password
},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var authenticatedUser = JSON.parse(response);
//alert("Data Loaded: " + authenticatedUser);
if (onComplete != null) {
onComplete(authenticatedUser);
}
},
error: function (xhr, status, error) {
//alert(xhr.responseText);
if (onComplete != null) {
onComplete(xhr.responseText);
}
}
});
私が試したこと
試み1 - 「正しい」方法
https://learn.microsoft.com/en-us/aspnet/core/security/cors
私は、Microsoft Web サイトのこのチュートリアルに忠実に従い、Startup.cs でグローバルに有効にする、すべてのコントローラーに設定する、すべてのアクションで試すという 3 つのオプションをすべて試しました。
この方法に従うと、クロス ドメインは機能しますが、単一のコントローラー上の単一のアクション (AccountController への POST) でのみ機能します。その他すべてについては、Microsoft.AspNetCore.Cors
ミドルウェアはヘッダーの設定を拒否します。
NUGET経由でインストールしましたMicrosoft.AspNetCore.Cors
が、バージョンは1.1.2
Startup.csでの設定方法は次のとおりです。
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
// Add Cors
services.AddCors(o => o.AddPolicy("MyPolicy", builder =>
{
builder.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader();
}));
// Add framework services.
services.AddMvc();
services.Configure<MvcOptions>(options =>
{
options.Filters.Add(new CorsAuthorizationFilterFactory("MyPolicy"));
});
...
...
...
}
// This method gets called by the runtime. Use this method to configure
//the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env,
ILoggerFactory loggerFactory)
{
loggerFactory.AddConsole(Configuration.GetSection("Logging"));
loggerFactory.AddDebug();
// Enable Cors
app.UseCors("MyPolicy");
//app.UseMvcWithDefaultRoute();
app.UseMvc();
...
...
...
}
ご覧のとおり、私は言われた通りにすべてやっています。私は2回ともMVCの前にCorsを追加し、それがうまくいかなかったときは、[EnableCors("MyPolicy")]
すべてのコントローラーにCorsを追加しようとしました。
[Route("api/[controller]")]
[EnableCors("MyPolicy")]
public class AdminController : Controller
試み2 - ブルートフォース攻撃
https://andrewlock.net/aspnet-core にデフォルトのセキュリティ ヘッダーを追加する/
前回の数時間の試行の後、ヘッダーを手動で設定して、すべての応答で強制的に実行することで、ブルートフォース攻撃を試みることに決めました。私は、すべての応答にヘッダーを手動で追加する方法に関するこのチュートリアルに従ってこれを実行しました。
これらは私が追加したヘッダーです
.AddCustomHeader("Access-Control-Allow-Origin", "*")
.AddCustomHeader("Access-Control-Allow-Methods", "*")
.AddCustomHeader("Access-Control-Allow-Headers", "*")
.AddCustomHeader("Access-Control-Max-Age", "86400")
これらは私が試した他のヘッダーですが、失敗しました
.AddCustomHeader("Access-Control-Allow-Methods", "GET, POST, PUT, PATCH, DELETE")
.AddCustomHeader("Access-Control-Allow-Headers", "content-type, accept, X-PINGOTHER")
.AddCustomHeader("Access-Control-Allow-Headers", "X-PINGOTHER, Host, User-Agent, Accept, Accept: application/json, application/json, Accept-Language, Accept-Encoding, Access-Control-Request-Method, Access-Control-Request-Headers, Origin, Connection, Content-Type, Content-Type: application/json, Authorization, Connection, Origin, Referer")
この方法では、クロスサイトヘッダーが適切に適用され、開発者コンソールとPostmanに表示されます。ただし、問題は、チェックは通過しますが、Webブラウザが(おそらく)次Access-Control-Allow-Origin
のようにヒステリーを起こします。Access-Control-Allow-Headers
415 (Unsupported Media Type)
つまり、力ずくの手段も機能しないのだ
ついに
誰かこれを動作させて手助けしてくれる人、または正しい方向を指し示してくれる人はいませんか?
編集
そのため、API 呼び出しを実行するには、JQuery の使用をやめて、純粋な JavascriptXMLHttpRequest
形式に切り替える必要がありました。
試行 1
Microsoft.AspNetCore.Cors
MindingData の回答に従って を動作させることができましたが、メソッド内で の前にConfigure
を置く必要がありました。app.UseCors
app.UseMvc
さらに、Javascript API ソリューションと組み合わせると、options.AllowAnyOrigin()
ワイルドカード サポートも機能し始めました。
試行2
そこで、試行 2 (ブルート フォース) を機能させることに成功しました... 唯一の例外は、ワイルドカードがAccess-Control-Allow-Origin
機能しないため、アクセスできるドメインを手動で設定する必要があることです。
明らかに理想的ではないのですが、このWebAPIをすべての人に広く公開したいだけですが、少なくとも別のサイトでは機能しているので、これは始まりです。
app.UseSecurityHeadersMiddleware(new SecurityHeadersBuilder()
.AddDefaultSecurePolicy()
.AddCustomHeader("Access-Control-Allow-Origin", "http://localhost:3000")
.AddCustomHeader("Access-Control-Allow-Methods", "OPTIONS, GET, POST, PUT, PATCH, DELETE")
.AddCustomHeader("Access-Control-Allow-Headers", "X-PINGOTHER, Content-Type, Authorization"));
ベストアンサー1
非常に単純な CORS ポリシー (XXX ドメインからのすべてのリクエストを許可する) があるため、それほど複雑にする必要はありません。まず、次の操作を実行してみてください (CORS の非常に基本的な実装)。
まだインストールしていない場合は、CORS nuget パッケージをインストールしてください。
Install-Package Microsoft.AspNetCore.Cors
startup.cs の ConfigureServices メソッドに、CORS サービスを追加します。
public void ConfigureServices(IServiceCollection services)
{
services.AddCors(); // Make sure you call this previous to AddMvc
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
}
次に、startup.cs の Configure メソッドに次のコードを追加します。
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
// Make sure you call this before calling app.UseMvc()
app.UseCors(
options => options.WithOrigins("http://example.com").AllowAnyMethod()
);
app.UseMvc();
}
さあ、試してみましょう。ポリシーは、異なるアクション (異なるホストや異なるヘッダーなど) に対して異なるポリシーが必要な場合に使用します。簡単な例では、実際には必要ありません。この簡単な例から始めて、必要に応じて調整してください。
参考文献 :http://dotnetcoretutorials.com/2017/01/03/enable-cors-asp-net-core/ を参照してください。