私がやろうとしていること
Azure Free PlanでホストされているバックエンドASP.Net Core Web APIを持っています（ソースコード：https : //github.com/killerrin/Portfolio-Backend）。
また、その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://docs.microsoft.com/en-us/aspnet/core/security/cors
私はMicrosoftのWebサイトでこのチュートリアルに従って、Startup.csでグローバルに有効にする3つのオプションをすべて試し、すべてのコントローラーで設定し、すべてのアクションで試しました。
この方法に従うと、クロスドメインは機能しますが、単一のコントローラーの単一のアクション（AccountControllerへのPOST）でのみ機能します。それ以外の場合、Microsoft.AspNetCore.Corsミドルウェアはヘッダーの設定を拒否します。
Microsoft.AspNetCore.CorsNUGET を使用してインストールしましたが、バージョンは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();
...
...
...
}ご覧のとおり、私は言われたとおりにすべてを行っています。私はMVCの前に両方のCorsを追加しましたが、それがうまくいかないときは[EnableCors("MyPolicy")]、すべてのコントローラーをそのように配置しようとしました
[Route("api/[controller]")]
[EnableCors("MyPolicy")]
public class AdminController : Controller試行2-ブルートフォーシング
https://andrewlock.net/adding-default-security-headers-in-asp-net-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に表示されます。しかし問題は、Access-Control-Allow-Originチェックに合格している間、ウェブブラウザがヒス音を当てるということです（私は信じています）Access-Control-Allow-Headers述べます415 (Unsupported Media Type)
したがって、ブルートフォースメソッドも機能しません
最後に
誰かがこれを機能させて手を貸すことができましたか、それとも私を正しい方向に向けることができましたか？
編集
したがって、API呼び出しを実行するには、JQueryの使用を停止し、Pure Javascript XMLHttpRequest形式に切り替える必要がありました。
試行1
メソッドをbeforeに置くことMicrosoft.AspNetCore.Corsを除いて、MindingDataの回答に従ってを動作させることができました。Configureapp.UseCorsapp.UseMvc
さらに、options.AllowAnyOrigin()ワイルドカードサポート用のJavascript APIソリューションと組み合わせると、同様に機能し始めました。
試行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"));
415 (Unsupported Media Type)問題については、Content-Typeリクエストヘッダーをに設定しapplication/jsonます。