ExtJS - 将标头添加到 AJAX 存储

Posted 2023-02-26

【中文标题】ExtJS - 将标头添加到 AJAX 存储

【英文标题】：ExtJS - Adding headers to AJAX store

【发布时间】：2016-05-25 14:21:06

【问题描述】：

尽管我已经配置了商店的标头配置，但收到如下错误：No 'Access-Control-Allow-Origin' header is present on the requested resource。

这是我的proxy配置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'
        
    

request 的 Chrome 网络预览版：

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

【参考方案1】：

您不必向商店添加标题。您必须向存储请求的资源添加标头，因为后端位于不同的服务器上，必须指示您的脚本（存储在您的服务器上）被允许使用后端服务器提供的数据。

例如如果您使用 C# WebAPI 后端，请创建自定义标头过滤器

public class AddCustomHeaderFilter : ActionFilterAttribute

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

或者如果您使用 php 后端，

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

仅列举两种可能的方式。搜索“Set Access-Control-Allow-Origin header ”，您应该会找到数十篇关于该问题的 SO 帖子。

如果您使用第三方的后端，那么您就不走运了。您要么必须请求第三方将您的服务器列入白名单，要么使用您自己的服务器作为代理。

【参考方案2】：

典型的访问控制起源问题。这个问题需要解决服务器端而不是客户端。 我已经通过将以下代码添加到 Global.asax.cs 文件来完成它

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();