1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    79
    Answers
    7
    Vote Rating
    1
    jonathansimmons is on a distinguished road

      0  

    Default Answered: EXT.Ajax.request Using OPTIONS rather than GET

    Answered: EXT.Ajax.request Using OPTIONS rather than GET


    Ok I'm trying my first take at using the sencha command utility to generate an app to work with a rails app I'm building.

    I have a form that when the submit button is clicked sends an ajax request for login. I've had this working no problem in other versions of sencha. For whatever reason though with 2.0 my Ext.Ajax.request is sending using the OPTIONS method rather than my desired GET. (even after specifying GET on the Ext.Ajax request itself)

    I've never even heard of OPTIONS, regardless I'm not getting a response from my request. The rails logs show the request come in but the browser console log of the response is empty. I've posted my Ext.Ajax.request below along with the console.log info for it. I'm also getting an XMLHttpRequest error and I don't know why.

    Again this is sencha app I'm running from my local documents folder. (I feel like maybe this might be the cause of the issue that its a local file making the request but quite honestly I don't understand how all that works enough to know for sure. I've an http client (http://ditchnet.org/httpclient/) to test my api endpoints and they work no problem. so I'm unsure what is wrong)

    Code:
        Ext.Ajax.request({
            method: 'GET',
            url: 'http://localhost:3000/api/sign-in.json',
            headers: {
                "Content-Type": "application/json"
            },
            params: this.getSignInForm().getValues(),
            success: function(response, post){
                    console.log(response)
                    console.log(post)
            }
        });
    Code:
    Sign-in Button Tapped
    XMLHttpRequest cannot load http://localhost:3000/api/sign-in.json?_dc=1332447962397&email=user%40example.com&password=mypassword. Origin null is not allowed by Access-Control-Allow-Origin.
    Sessions.js:28
    Object
       getAllResponseHeaders: function () {
       getResponseHeader: function (header) {
       request: Object
       requestId: NaN
       responseText: ""
      responseXML: null
      status: 0
      statusText: ""
      __proto__: Object
    Sessions.js:29
    Object
       headers: Object
       Content-Type: "application/json"
    __proto__: Object
       method: "GET"
       params: Object
       email: "user@example.com"
       password: "mypassword"
    __proto__: Object
        success: function (response, post){
        url: "http://localhost:3000/api/sign-in.json"
    __proto__: Object

  2. So it appears this is simple a limitation to Google Chrome. It has a web security setting that doesn't allow requests to originate from file:// which is how I'm loaded this app as I'm just developing it locally.

    Fortunately safari doesn't have this setting and has allowed me to continue to develop. I hope this helps someone and if you have any more knowledge please add it I'd love to be informed of anything I'm not understanding here.

  3. #2
    Sencha User
    Join Date
    Nov 2011
    Posts
    79
    Answers
    7
    Vote Rating
    1
    jonathansimmons is on a distinguished road

      0  

    Default Found a workaround

    Found a workaround


    So it appears this is simple a limitation to Google Chrome. It has a web security setting that doesn't allow requests to originate from file:// which is how I'm loaded this app as I'm just developing it locally.

    Fortunately safari doesn't have this setting and has allowed me to continue to develop. I hope this helps someone and if you have any more knowledge please add it I'd love to be informed of anything I'm not understanding here.

  4. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Answers
    3540
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    What is happening is the browser doesn't allow cross-origin XMLHttpRequest unless your server supports CORS.

    To check if a server supports CORS the browser will send a request to it using the OPTIONS method, this is what you are seeing.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

Tags for this Thread