Apa yang saya coba lakukan
Saya memiliki API Web Inti ASP.Net backend yang dihosting pada Paket Gratis Azure (Kode Sumber: https://github.com/killerrin/Portfolio-Backend ).
Saya juga memiliki Situs Web Klien yang ingin saya konsumsi menggunakan API itu. Aplikasi Klien tidak akan di-host di Azure, tetapi akan di-host di Halaman Github atau di Layanan Web Hosting lain yang saya punya akses. Karena itu, nama domain tidak akan berbaris.
Melihat ke dalam ini, saya perlu mengaktifkan CORS di sisi API Web, namun saya telah mencoba hampir semuanya selama beberapa jam sekarang dan menolak untuk bekerja.
Bagaimana Saya Mengeset Klien Hanya klien sederhana yang ditulis dalam React.js. Saya menelepon API melalui AJAX di Jquery. Situs Bereaksi berfungsi jadi saya tahu bukan itu. Panggilan Jquery API berfungsi seperti yang saya konfirmasikan dalam Percobaan 1. Berikut adalah cara saya melakukan panggilan
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);
}
}
});
Apa yang saya coba
Percobaan 1 - Cara yang 'pantas'
https://docs.microsoft.com/en-us/aspnet/core/security/cors
Saya telah mengikuti tutorial ini di Situs Web Microsoft ke T, mencoba semua 3 opsi untuk mengaktifkannya secara global di Startup.cs, Menyiapkannya di setiap pengontrol dan Mencoba di setiap Tindakan.
Mengikuti metode ini, Cross Domain berfungsi, tetapi hanya pada Aksi tunggal pada pengontrol tunggal (POST ke AccountController). Untuk yang lainnya, Microsoft.AspNetCore.Cors
middleware menolak untuk mengatur header.
Saya menginstal Microsoft.AspNetCore.Cors
melalui NUGET dan versinya1.1.2
Ini adalah bagaimana saya mengaturnya di 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();
...
...
...
}
Seperti yang Anda lihat, saya melakukan semua yang diperintahkan. Saya menambahkan Cors sebelum MVC dua kali, dan ketika itu tidak berhasil saya mencoba memakai [EnableCors("MyPolicy")]
setiap pengontrol seperti itu
[Route("api/[controller]")]
[EnableCors("MyPolicy")]
public class AdminController : Controller
Mencoba 2 - Brute Memaksakannya
https://andrewlock.net/adding-default-security-headers-in-asp-net-core/
Setelah beberapa jam mencoba pada upaya sebelumnya, saya pikir saya akan mencoba bruteforce dengan mencoba mengatur header secara manual, memaksa mereka untuk berjalan di setiap respons. Saya melakukan ini mengikuti tutorial ini tentang cara menambahkan header secara manual ke setiap respons.
Ini adalah tajuk yang saya tambahkan
.AddCustomHeader("Access-Control-Allow-Origin", "*")
.AddCustomHeader("Access-Control-Allow-Methods", "*")
.AddCustomHeader("Access-Control-Allow-Headers", "*")
.AddCustomHeader("Access-Control-Max-Age", "86400")
Ini adalah tajuk lain yang saya coba yang gagal
.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")
Dengan metode ini, header Cross Site sedang diterapkan dengan benar dan mereka muncul di konsol pengembang saya dan di Postman. Namun masalahnya adalah bahwa sementara melewati Access-Control-Allow-Origin
cek, webbrowser melempar fit (saya percaya) Access-Control-Allow-Headers
menyatakan415 (Unsupported Media Type)
Jadi metode brute force juga tidak berfungsi
Akhirnya
Adakah yang berhasil melakukan ini dan bisa membantu, atau hanya bisa mengarahkan saya ke arah yang benar?
EDIT
Jadi untuk mendapatkan panggilan API, saya harus berhenti menggunakan JQuery dan beralih ke XMLHttpRequest
format Javascript Murni .
Percobaan 1
Saya berhasil mendapatkan Microsoft.AspNetCore.Cors
untuk bekerja dengan mengikuti jawaban MindingData, kecuali dalam Configure
Metode menempatkan app.UseCors
sebelumnya app.UseMvc
.
Selain itu, ketika dicampur dengan Javascript API Solution options.AllowAnyOrigin()
untuk dukungan wildcard mulai berfungsi juga.
Percobaan 2
Jadi saya telah berhasil mendapatkan Percobaan 2 (brute forcing it) untuk bekerja ... dengan satu-satunya pengecualian bahwa Wildcard untuk Access-Control-Allow-Origin
tidak berfungsi dan karena itu saya harus secara manual mengatur domain yang memiliki akses ke sana.
Ini jelas tidak ideal karena saya hanya ingin WebAPI ini dibuka lebar untuk semua orang, tetapi setidaknya ini berfungsi untuk saya di situs terpisah, yang berarti ini adalah permulaan
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)
masalah Anda , aturContent-Type
tajuk permintaan keapplication/json
.