CODEWITHSUNDEEP
ajaxextjsextjs4extjs4.1sencha-architect
talha06
talha06

Reputation: 6466

ExtJS - Adding headers to AJAX store

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

Upvotes: 0

Views: 2222

Answers (2)

aMazing
aMazing

Reputation: 1460

Typical Access control origin problem. This problem needs to be solved server side rather client side. I have done it by adding following code to the Global.asax.cs file

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

Upvotes: 0

Alexander
Alexander

Reputation: 20234

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.

Upvotes: 2

Related Questions