ExtJS-将标题添加到AJAX存储 [英] ExtJS - Adding headers to AJAX store

问题描述

尽管我已经配置了商店的标头配置，但出现这样的错误:No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是我的 Ext.data.Store 的 proxy 配置:

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

解决方案

您不必在存储中添加标题.您必须将标头添加到存储所请求的资源中，因为后端位于不同的服务器上，必须指示允许您存储在服务器上的脚本使用后端服务器提供的数据.

例如如果您使用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: *");

仅举两种可能的方式.搜索设置Access-Control-Allow-Origin标头< yourBackendTechnology>"，您应该找到关于该问题的数十篇SO帖子.

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

Despite that I have configured the headers configuration of my store, getting an error like this: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Here is my proxy configuration of 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 Network Preview for the 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

解决方案

You don't have to add headers to the store. You have to add headers to the resource that the store is requesting, because the backend, being on a different server, has to indicate that your script, stored on your server, is allowed to use the data that the backend server delivers.

E.g. if you use a C# WebAPI backend, create a custom header filter

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

or if you use a PHP backend,

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

just to name two possible ways. Searching for "Set Access-Control-Allow-Origin header <yourBackendTechnology>", you should find dozens of SO posts regarding the issue.

If you use a backend of a third party, you are out of luck. You will either have to request the third party to whitelist your server, or use your own server as a proxy.

这篇关于ExtJS-将标题添加到AJAX存储的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！