मैं क्या करने की कोशिश कर रहा हूं
मेरे पास एक बैकएंड ASP.Net कोर वेब एपीआई है जो एक एज़्योर फ्री प्लान (स्रोत कोड: https://github.com/killerrin/Portfolio-Backend ) पर होस्ट किया गया है ।
मेरे पास एक क्लाइंट वेबसाइट भी है जिसे मैं उस एपीआई का उपभोग करना चाहता हूं। क्लाइंट एप्लिकेशन को Azure पर होस्ट नहीं किया जाएगा, बल्कि इसे Github Pages या किसी अन्य वेब होस्टिंग सेवा पर होस्ट किया जाएगा जिसकी मुझे एक्सेस है। इस वजह से डोमेन नाम लाइन नहीं होंगे।
इसे देखते हुए, मुझे वेब एपीआई की तरफ कॉर्स को सक्षम करने की आवश्यकता है, हालांकि मैंने अभी कई घंटों तक सब कुछ करने की कोशिश की है और यह काम करने से इनकार कर रहा है।
मेरे पास क्लाइंट सेटअप कैसे है यह React.js में लिखा गया एक साधारण क्लाइंट है। मैं AJAX के माध्यम से Jquery में एपीआई कॉल कर रहा हूं। प्रतिक्रिया साइट काम करती है इसलिए मुझे पता है कि नहीं। 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 वेबसाइट पर इस ट्यूटोरियल को एक टी तक फॉलो किया है, इसे Startup.cs में ग्लोबली सक्षम करने के सभी 3 विकल्पों को आज़माते हुए, इसे हर कंट्रोलर पर सेट करके हर एक्शन पर आज़माया।
इस पद्धति का अनुसरण करते हुए, क्रॉस डोमेन काम करता है, लेकिन केवल एक ही नियंत्रक पर एक क्रिया पर (POST से खाता नियंत्रक)। बाकी सब चीज़ों के लिए, Microsoft.AspNetCore.Corsमिडलवेयर हेडर सेट करने से मना कर देता है।
मैं Microsoft.AspNetCore.CorsNUGET के माध्यम से स्थापित किया है और संस्करण है1.1.2
यहां बताया गया है कि स्टार्टअप में यह कैसे सेटअप है
// 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 से पहले दोनों बार कॉर्स जोड़ता हूं, और जब मैंने काम नहीं किया, तो मैंने [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")इस पद्धति के साथ, क्रॉस साइट हेडर को ठीक से लागू किया जा रहा है और वे मेरे डेवलपर कंसोल और पोस्टमैन में दिखाई देते हैं। समस्या फिर भी है कि यह गुजरता है, जबकि Access-Control-Allow-Originजांच, webbrowser पर (मेरा मानना है कि) एक hissy फिट फेंकता Access-Control-Allow-Headersबताते हुए415 (Unsupported Media Type)
तो जानवर बल विधि भी काम नहीं करती है
आखिरकार
क्या किसी ने इसे काम करने के लिए दिया है और एक हाथ उधार दे सकता है, या बस मुझे सही दिशा में इंगित करने में सक्षम है?
संपादित करें
तो जाने के लिए एपीआई कॉल प्राप्त करने के लिए, मुझे JQuery का उपयोग करना बंद करना होगा और शुद्ध जावास्क्रिप्ट XMLHttpRequestप्रारूप में स्विच करना होगा ।
प्रयास 1
मैं पहले डालने के तरीके के Microsoft.AspNetCore.Corsअलावा, MindsData के जवाब का पालन करके काम पाने में कामयाब रहा ।Configureapp.UseCorsapp.UseMvc
इसके अलावा, जब options.AllowAnyOrigin()वाइल्डकार्ड समर्थन के लिए जावास्क्रिप्ट एपीआई सॉल्यूशन के साथ मिश्रित काम करना शुरू हुआ।
प्रयास २
इसलिए मैं काम करने के लिए प्रयास 2 (यह मजबूर करने के लिए) प्राप्त करने में कामयाब रहा हूं ... एकमात्र अपवाद है कि वाइल्डकार्ड Access-Control-Allow-Originकाम नहीं करता है और जैसे कि मुझे उन डोमेन को मैन्युअल रूप से सेट करना होगा जिनकी उस तक पहुंच है।
इसका स्पष्ट रूप से आदर्श नहीं है क्योंकि मैं चाहता हूं कि यह वेबएपीआई सभी के लिए व्यापक हो, लेकिन यह मेरे लिए एक अलग साइट पर काम करता है, जिसका अर्थ है कि यह एक शुरुआत है
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।