CODEWITHSUNDEEP
javascriptextjsbrowsercorssencha-architect
aMazing
aMazing

Reputation: 1460

Need correct Extjs syntax to implement CORS solution using Ext.Ajax.Request

This question has been asked a few times and answered as well, however I am trying to implement the suggested approach but going nowhere. Its a typical CORS issue. Except in my case I want to be able to use localhost or my pc IP on the browser. If my config has been set to use IP, using localhost gives me the CORS error and vice versa. Any guidance is appreciated. Note: Please ignore different ip addresses in my screenshot and text.

Failed to load resource: the server responded with a status of 405 (Method Not Allowed) localhost/:1 XMLHttpRequest cannot load http://192.168.1.2/ARES/store/1.0/core/rest/authenticate/-99/-99. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. The response had HTTP status code 405.

My code is as below: I cant find a way to set the header correctly to us Allow-Origin. 

Ext.Ajax.request({
  url: url,
  timeout: 2000,
  cors: true,
  method: 'GET',
  headers: {
    'Access-Control-Allow-Origin': 'http://localhost/'
  },
  success: function(response, options) {
    Ext.getBody().unmask();
    Manager.app.fireEvent('showLoginView');
  },
  failure: function(response, options) {
    Ext.getBody().unmask();
  }
});

When I run it in the browser I see Request Headers as below:

Request Headers Request

Upvotes: 1

Views: 2783

Answers (3)

aMazing
aMazing

Reputation: 1460

It is done on the webservice end: This is how I achieved it: Following code goes in the Global.asax file. Hope it helps someone.

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", "Content-Type, Accept");
        HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
        HttpContext.Current.Response.End();
    }
}

Upvotes: 0

Alexander
Alexander

Reputation: 20234

From Mozilla Developer Network:

The Cross-Origin Resource Sharing standard works by adding new HTTP headers that allow servers to describe the set of origins that are permitted to read that information using a web browser.

Emphasis by me.

You won't be able to set CORS headers client side, because they are a means against client-side exploitation. Any user will be able to mess with your client side code, so every security measure has to be server-side.

The header you use, Access-Control-Allow-Origin, is to be used as a HTTP response header, not a request header. The answer how to implement it correctly heavily depends on the backend language/framework used, which you should make a different question.

But if I understand your question correctly, you are only working on localhost AKA 192.168.x.y and you only have issues with "cross-site requests" between hostname and IP. Using a relative URL should be the solution. Instead of url:"http://localhost/ARES/store/1.0/core/rest/authenticate/-99/-99" or url:"http://192.168.1.2/ARES/store/1.0/core/rest/authenticate/-99/-99", you should use url:"../ARES/store/1.0/core/rest/authenticate/-99/-99".

Upvotes: 0

LightNight
LightNight

Reputation: 851

or simply create shortcut for chrome with 

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security

this will open chrome with disable-web-security flag and your request will reach server without problem or additional "OPTIONS" methods

Upvotes: 2

Related Questions