ExtJS - Hinzufügen von Kopfzeilen zu AJAX-Shop

Question

Trotzdem habe ich die Header-Konfiguration meines Geschäfts konfiguriert, erhalten einen Fehler wie folgt: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Hier ist meine proxy Konfiguration von Ext.data.Store:

proxy  : { 
     type : 'ajax', 
     headers : { 
      'Access-Control-Allow-Origin': '*', 
      'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, DELETE, PUT', 
      'Access-Control-Max-Age': '1000', 
      'Access-Control-Allow-Headers': 'x-requested-with, Content-Type, origin, authorization, accept, client-security-token' 
     }, 
     api  : { 
      read   : 'https://myurl.com' 
     }, 
     reader : { 
      type   : 'json', 
      rootProperty : 'data', 
      successProperty : 'success', 
      totalProperty : 'totalCount' 
     }, 
     writer : { 
      type   : 'json', 
      writeAllFields : true, 
      encode   : true, 
      rootProperty : 'data' 
     } 
    } 

Chrome Vorschau des Netzwerks für die request:

Accept:*/* 
Accept-Encoding:gzip, deflate, sdch 
Accept-Language:en,en-US;q=0.8,tr;q=0.6 
Access-Control-Request-Headers:access-control-allow-headers, access-control-allow-methods, access-control-allow-origin, access-control-max-age, x-requested-with 
Access-Control-Request-Method:GET 
Cache-Control:max-age=0 
Connection:keep-alive 
Host:xyz.com 
Origin:http://localhost:9090 
Referer:http://localhost:9090/ 
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36 

Answer 1

Sie müssen keine Header zum Speicher hinzufügen . Sie müssen der vom Speicher angeforderten Ressource Kopfzeilen hinzufügen, da das Back-End, das sich auf einem anderen Server befindet, angeben muss, dass Ihr auf dem Server gespeichertes Skript die vom Back-End-Server bereitgestellten Daten verwenden darf.

z. wenn Sie eine C# WebAPI Backend verwenden, erstellen Sie einen benutzerdefinierten Header-Filter

public class AddCustomHeaderFilter : ActionFilterAttribute 
{ 
    public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext) 
    { 
     try 
     { 
      actionExecutedContext.Response.Content.Headers.Add("Access-Control-Allow-Origin", "*"); 
     } 
     catch { } 
    } 
} 

oder wenn Sie ein PHP-Backend verwenden,

header('content-type: application/json; charset=utf-8'); 
header("Access-Control-Allow-Origin: *"); 

nur zwei Möglichkeiten zu nennen. Wenn Sie nach "Set Access-Control-Allow-Origin header < yourBackendTechnology>" suchen, sollten Sie Dutzende von SO-Posts bezüglich des Problems finden.

Wenn Sie ein Back-End einer dritten Partei verwenden, haben Sie kein Glück. Sie müssen entweder die dritte Partei auffordern, Ihren Server auf die weiße Liste zu setzen, oder Ihren eigenen Server als Proxy verwenden.

Answer 2

Typisches Ursprungsproblem der Zugriffssteuerung. Dieses Problem muss serverseitig eher clientseitig gelöst werden. Ich habe es getan, indem ich folgenden Code der Datei Global.asax.cs hinzugefügt habe

protected void Application_BeginRequest(object sender, EventArgs e) 
    { 
     HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*"); 

     if (HttpContext.Current.Request.HttpMethod == "OPTIONS") 
     { 
      //These headers are handling the "pre-flight" OPTIONS call sent by the browser 
      HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS,PUT,DELETE"); 
      HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "X-Requested-With,Content-Type"); 
      HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept"); 
      HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000"); 
      HttpContext.Current.Response.End(); 
     } 
    }