RSS

Most votes on ajax questions 8

Most votes on ajax questions 8. #71 What's the point of the X-Requested-With header? #72 How to get response status code from jQuery.ajax? #73 Reactjs convert html string to jsx #74 Google Chrome display JSON AJAX response as tree and not as a plain text #75 GUI-based or Web-based JSON editor that works like property explorer #76 What is difference between Axios and Fetch? #77 Show spinner GIF during an $http request in AngularJS? #78 How do I cancel an HTTP fetch() request? #79 URL Encode a string in jQuery for an AJAX request #80 How to get a cross-origin resource sharing (CORS) post request working

Read all the top votes questions and answers in a single page.

#71: What's the point of the X-Requested-With header? (Score: 246)

Created: 2013-07-04 Last updated: 2017-01-14

Tags: jquery, ajax, http-headers, cors

JQuery and other frameworks add the following header:

X-Requested-With: XMLHttpRequest

Why is this needed? Why would a server want to treat AJAX requests differently than normal requests?

UPDATE: I just found a real-life example using this header: https://core.spreedly.com/manual/payment-methods/adding-with-js. If the payment processor is requested without AJAX, it redirects back to the original website when it’s done. When it is requested with AJAX, no redirection is done.

#71 Best answer 1 of What's the point of the X-Requested-With header? (Score: 280)

Created: 2014-03-20 Last updated: 2017-06-29

A good reason is for security - this can prevent CSRF attacks because this header cannot be added to the AJAX request cross domain without the consent of the server via CORS.

Only the following headers are allowed cross domain:

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type

any others cause a “pre-flight” request to be issued in CORS supported browsers.

Without CORS it is not possible to add X-Requested-With to a cross domain XHR request.

If the server is checking that this header is present, it knows that the request didn’t initiate from an attacker’s domain attempting to make a request on behalf of the user with JavaScript. This also checks that the request wasn’t POSTed from a regular HTML form, of which it is harder to verify it is not cross domain without the use of tokens. (However, checking the Origin header could be an option in supported browsers, although you will leave old browsers vulnerable.)

New Flash bypass discovered

You may wish to combine this with a token, because Flash running on Safari on OSX can set this header if there’s a redirect step. It appears it also worked on Chrome, but is now remediated. More details here including different versions affected.

OWASP Recommend combining this with an Origin and Referer check:

This defense technique is specifically discussed in section 4.3 of Robust Defenses for Cross-Site Request Forgery. However, bypasses of this defense using Flash were documented as early as 2008 and again as recently as 2015 by Mathias Karlsson to exploit a CSRF flaw in Vimeo. But, we believe that the Flash attack can’t spoof the Origin or Referer headers so by checking both of them we believe this combination of checks should prevent Flash bypass CSRF attacks. (NOTE: If anyone can confirm or refute this belief, please let us know so we can update this article)

However, for the reasons already discussed checking Origin can be tricky.

Update

Written a more in depth blog post on CORS, CSRF and X-Requested-With here.

#71 Best answer 2 of What's the point of the X-Requested-With header?(Score: 30)

Created: 2013-07-04 Last updated: 2014-10-24

Make sure you read SilverlightFox’s answer. It highlights a more important reason.

The reason is mostly that if you know the source of a request you may want to customize it a little bit.

For instance lets say you have a website which has many recipes. And you use a custom jQuery framework to slide recipes into a container based on a link they click. The link may be www.example.com/recipe/apple_pie

Now normally that returns a full page, header, footer, recipe content and ads. But if someone is browsing your website some of those parts are already loaded. So you can use an AJAX to get the recipe the user has selected but to save time and bandwidth don’t load the header/footer/ads.

Now you can just write a secondary endpoint for the data like www.example.com/recipe_only/apple_pie but that’s harder to maintain and share to other people.

But it’s easier to just detect that it is an ajax request making the request and then returning only a part of the data. That way the user wastes less bandwidth and the site appears more responsive.

The frameworks just add the header because some may find it useful to keep track of which requests are ajax and which are not. But it’s entirely dependent on the developer to use such techniques.

It’s actually kind of similar to the Accept-Language header. A browser can request a website please show me a Russian version of this website without having to insert /ru/ or similar in the URL.

See also original question in stackoverflow

#72: How to get response status code from jQuery.ajax? (Score: 245)

Created: 2011-03-17

Tags: ajax, jquery-1.5

In the following code, all I am trying to do is to get the HTTP response code from a jQuery.ajax call. Then, if the code is 301 (Moved Permanently), display the ‘Location’ response header:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>jQuery 301 Trial</title>
  <script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>

  <script type="text/javascript">
  function get_resp_status(url) {
    $.ajax({
      url: url,
      complete: function (jqxhr, txt_status) {
        console.log ("Complete: [ " + txt_status + " ] " + jqxhr);
        // if (response code is 301) {
        console.log ("Location: " + jqxhr.getResponseHeader("Location"));
        // }
      }
    });
  }
  </script>
  <script type="text/javascript">
  $(document).ready(function(){
    $('a').mouseenter(
      function () {
        get_resp_status(this.href);
      },
      function () {
      }
    );
  });
  </script>
</head>
<body>
  <a href="http://ow.ly/4etPl">Test 301 redirect</a>
  <a href="http://cnn.com/not_found">Test 404 not found</a>
</body>
</html>

Can someone point out where I am going wrong? When I check the ‘jqxhr’ object in Firebug, I can’t find the status code, nor the ‘Location’ response header. I set the breakpoint on last line of ‘complete’.

Thanks much.

#72 Best answer 1 of How to get response status code from jQuery.ajax? (Score: 236)

Created: 2011-03-17

I see the status field on the jqXhr object, here is a fiddle with it working:

http://jsfiddle.net/magicaj/55HQq/3/

$.ajax({
    //...        
    success: function(data, textStatus, xhr) {
        console.log(xhr.status);
    },
    complete: function(xhr, textStatus) {
        console.log(xhr.status);
    } 
});

#72 Best answer 2 of How to get response status code from jQuery.ajax?(Score: 53)

Created: 2013-07-02 Last updated: 2018-01-27

Came across this old thread searching for a similar solution myself and found the accepted answer to be using .complete() method of jquery ajax. I quote the notice on jquery website here:

The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are deprecated as of jQuery 1.8. To prepare your code for their eventual removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

To know the status code of a ajax response, one can use the following code:

$.ajax( url [, settings ] )
.always(function (jqXHR) {
    console.log(jqXHR.status);
});

Works similarily for .done() and .fail()

See also original question in stackoverflow

#73: Reactjs convert html string to jsx (Score: 244)

Created: 2013-10-09 Last updated: 2019-12-18

Tags: javascript, jquery, ajax, reactjs

I’m having trouble dealing with facebook’s ReactJS. Whenever I do ajax and want to display an html data, ReactJS displays it as text. (See figure below)

ReactJS render string

The data is displayed through the success callback function of the jquery Ajax.

$.ajax({
   url: url here,
   dataType: "json",
   success: function(data) {
      this.setState({
           action: data.action
      })
   }.bind(this)
});

enter image description here

Is there any easy way to convert this into html? How should I do it using ReactJS?

#73 Best answer 1 of Reactjs convert html string to jsx (Score: 446)

Created: 2013-10-09 Last updated: 2018-09-25

By default, React escapes the HTML to prevent XSS (Cross-site scripting). If you really want to render HTML, you can use the dangerouslySetInnerHTML property:

<td dangerouslySetInnerHTML={{__html: this.state.actions}} />

React forces this intentionally-cumbersome syntax so that you don’t accidentally render text as HTML and introduce XSS bugs.

#73 Best answer 2 of Reactjs convert html string to jsx(Score: 84)

Created: 2015-01-14 Last updated: 2015-01-14

There are now safer methods to accomplish this. The docs have been updated with these methods.

Other Methods

  1. Easiest - Use Unicode, save the file as UTF-8 and set the charset to UTF-8.

    <div>{'First · Second'}</div>

  2. Safer - Use the Unicode number for the entity inside a Javascript string.

    <div>{'First \u00b7 Second'}</div>

or

`<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>`
  1. Or a mixed array with strings and JSX elements.

    <div>{['First ', <span>&middot;</span>, ' Second']}</div>

  2. Last Resort - Insert raw HTML using dangerouslySetInnerHTML.

    <div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />

See also original question in stackoverflow

#74: Google Chrome display JSON AJAX response as tree and not as a plain text (Score: 238)

Created: 2010-10-08

Tags: ajax, json, google-chrome, view, tree

I cannot find an answer to this one:

My AJAX calls return JSON data. In Google Chrome Developer Tools > Resources > XHR when I click on the resource on the left and then on the Content tab I see the JSON string as a string and not as a tree as Firebug and Firebug Lite do.

How do I force Chrome to diplay it as a tree. Is there a Content-type that my PHP file must have???

I would happy to know the answer!

Thank you Stefanos

#74 Best answer 1 of Google Chrome display JSON AJAX response as tree and not as a plain text (Score: 461)

Created: 2011-12-13

To see a tree view in recent versions of Chrome:

Navigate to Developer Tools > Network > the given response > Preview

#74 Best answer 2 of Google Chrome display JSON AJAX response as tree and not as a plain text(Score: 68)

Created: 2010-12-02 Last updated: 2014-07-17

Google Chrome now supports this (Developer Tools > Network > [XHR item in list] Preview).

In addition, you can use a third party tool to format the json content. Here’s one that presents a tree view, and here’s another that merely formats the text (and does validation).

See also original question in stackoverflow

#75: GUI-based or Web-based JSON editor that works like property explorer (Score: 236)

Created: 2009-06-15 Last updated: 2021-03-29

Tags: jquery, ajax, json, editor, wysiwyg

Background: This is a request for something that may not exist yet, but I’ve been meaning to build one for a long time. First I will ask if anyone has seen anything like it yet.

Suppose you have an arbitrary JSON structure like the following:

{
    'title_str':'My Employee List'
    ,'lastmod_str': '2009-June-15'
    ,'employee_table':[
        {'firstname':'john','lastname':'doe','age':'33',}
        ,{'firstname':'jane','lastname':'doe','age':'34',}
        ,{'firstname':'samuel','lastname':'doe','age':'35',}
    ]
}

Question: Is there a web-based JSON editor that could take a structure like this, and automatically allow the user to modify this in a user-friendly GUI?

Example: Imagine an auto-generated HTML form that displays 2 input-type-text controls for both title and lastmod, and a table of input-type-text controls with three columns and three rows for arr_list … with the ability to delete or add additional rows by clicking on a [+][X] next to each row in the table.

Big Idea: The “big idea” behind this is that the user would be able to specify any arbitrary (non-recursive) JSON structure and then also be able to edit the structure with a GUI-based interaction (this would be similar to the “XML Editor Grid View” in XML Spy).

See also:

Update: (Thu 2014-07-31 18:31:11)

A github repository has been created to further track this closed SO post.

#75 Best answer 1 of GUI-based or Web-based JSON editor that works like property explorer (Score: 357)

Created: 2009-06-16 Last updated: 2021-01-06

Update: In an effort to answer my own question, here is what I’ve been able to uncover so far. If anyone else out there has something, I’d still be interested to find out more.

Based on JSON Schema

Commercial (No endorsement intended or implied, may or may not meet requirement)

jQuery

YAML

See Also

#75 Best answer 2 of GUI-based or Web-based JSON editor that works like property explorer(Score: 4)

Created: 2010-07-30

Generally when I want to create a JSON or YAML string, I start out by building the Perl data structure, and then running a simple conversion on it. You could put a UI in front of the Perl data structure generation, e.g. a web form.

Converting a structure to JSON is very straightforward:

use strict;
use warnings;
use JSON::Any;

my $data = { arbitrary structure in here };
my $json_handler = JSON::Any->new(utf8=>1);
my $json_string = $json_handler->objToJson($data);

See also original question in stackoverflow

#76: What is difference between Axios and Fetch? (Score: 236)

Created: 2016-11-28 Last updated: 2017-01-29

Tags: ajax, reactjs, xmlhttprequest, es6-promise, es6-modules

I am calling the web service by using fetch but the same I can do with the help of axios. So now I am confused. Should I go for either axios or fetch?

#76 Best answer 1 of What is difference between Axios and Fetch? (Score: 210)

Created: 2018-05-14 Last updated: 2019-01-15

Fetch and Axios are very similar in functionality, but for more backwards compatibility Axios seems to work better (fetch doesn’t work in IE 11 for example, check this post)

Also, if you work with JSON requests, the following are some differences I stumbled upon with.

Fetch JSON post request

let url = 'https://someurl.com';
let options = {
            method: 'POST',
            mode: 'cors',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            body: JSON.stringify({
                property_one: value_one,
                property_two: value_two
            })
        };
let response = await fetch(url, options);
let responseOK = response && response.ok;
if (responseOK) {
    let data = await response.json();
    // do something with data
}

Axios JSON post request

let url = 'https://someurl.com';
let options = {
            method: 'POST',
            url: url,
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            data: {
                property_one: value_one,
                property_two: value_two
            }
        };
let response = await axios(options);
let responseOK = response && response.status === 200 && response.statusText === 'OK';
if (responseOK) {
    let data = await response.data;
    // do something with data
}

So:

  • Fetch’s body = Axios' data
  • Fetch’s body has to be stringified, Axios' data contains the object
  • Fetch has no url in request object, Axios has url in request object
  • Fetch request function includes the url as parameter, Axios request function does not include the url as parameter.
  • Fetch request is ok when response object contains the ok property, Axios request is ok when status is 200 and statusText is ‘OK’
  • To get the json object response: in fetch call the json() function on the response object, in Axios get data property of the response object.

Hope this helps.

#76 Best answer 2 of What is difference between Axios and Fetch?(Score: 56)

Created: 2016-11-28 Last updated: 2019-08-22

They are HTTP request libraries…

I end up with the same doubt but the table in this post makes me go with isomorphic-fetch. Which is fetch but works with NodeJS.

http://andrewhfarmer.com/ajax-libraries/


The link above is dead The same table is here: https://www.javascriptstuff.com/ajax-libraries/

Or here: enter image description here

See also original question in stackoverflow

#77: Show spinner GIF during an $http request in AngularJS? (Score: 234)

Created: 2013-02-22 Last updated: 2019-01-05

Tags: angularjs, ajax, busyindicator

I am using the $http service of AngularJS to make an Ajax request.

How can a spinner GIF (or another type of busy indicator) be shown while the Ajax request is executing?

I don’t see anything like an ajaxstartevent in the AngularJS documentation.

#77 Best answer 1 of Show spinner GIF during an $http request in AngularJS? (Score: 471)

Created: 2013-02-22 Last updated: 2014-12-12

This really depends on your specific use case, but a simple way would follow a pattern like this:

.controller('MainCtrl', function ( $scope, myService ) {
  $scope.loading = true;
  myService.get().then( function ( response ) {
    $scope.items = response.data;
  }, function ( response ) {
    // TODO: handle the error somehow
  }).finally(function() {
    // called no matter success or failure
    $scope.loading = false;
  });
});

And then react to it in your template:

<div class="spinner" ng-show="loading"></div>
<div ng-repeat="item in items>{{item.name}}</div>

#77 Best answer 2 of Show spinner GIF during an $http request in AngularJS?(Score: 88)

Created: 2013-04-12 Last updated: 2014-01-09

Here are the current past AngularJS incantations:

angular.module('SharedServices', [])
    .config(function ($httpProvider) {
        $httpProvider.responseInterceptors.push('myHttpInterceptor');
        var spinnerFunction = function (data, headersGetter) {
            // todo start the spinner here
            //alert('start spinner');
            $('#mydiv').show();
            return data;
        };
        $httpProvider.defaults.transformRequest.push(spinnerFunction);
    })
// register the interceptor as a service, intercepts ALL angular ajax http calls
    .factory('myHttpInterceptor', function ($q, $window) {
        return function (promise) {
            return promise.then(function (response) {
                // do something on success
                // todo hide the spinner
                //alert('stop spinner');
                $('#mydiv').hide();
                return response;

            }, function (response) {
                // do something on error
                // todo hide the spinner
                //alert('stop spinner');
                $('#mydiv').hide();
                return $q.reject(response);
            });
        };
    });

//regular angular initialization continued below....
angular.module('myApp', [ 'myApp.directives', 'SharedServices']).
//.......

Here is the rest of it (HTML / CSS)….using

$('#mydiv').show(); 
$('#mydiv').hide(); 

to toggle it. NOTE: the above is used in the angular module at beginning of post

#mydiv {  
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1000;
    background-color:grey;
    opacity: .8;
 }

.ajax-loader {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -32px; /* -1 * image width / 2 */
    margin-top: -32px;  /* -1 * image height / 2 */
    display: block;     
}

<div id="mydiv">
    <img src="lib/jQuery/images/ajax-loader.gif" class="ajax-loader"/>
</div>

See also original question in stackoverflow

#78: How do I cancel an HTTP fetch() request? (Score: 232)

Created: 2015-06-25 Last updated: 2016-04-19

Tags: javascript, ajax, fetch-api

There is a new API for making requests from JavaScript: fetch(). Is there any built in mechanism for canceling these requests in-flight?

#78 Best answer 1 of How do I cancel an HTTP fetch() request? (Score: 337)

Created: 2017-11-12 Last updated: 2020-03-05

#TL/DR:

fetch now supports a signal parameter as of 20 September 2017, but not all browsers seem support this at the moment.

2020 UPDATE: Most major browsers (Edge, Firefox, Chrome, Safari, Opera, and a few others) support the feature, which has become part of the DOM living standard. (as of 5 March 2020)

This is a change we will be seeing very soon though, and so you should be able to cancel a request by using an AbortControllers AbortSignal.

#Long Version

###How to:

The way it works is this:

Step 1: You create an AbortController (For now I just used this)

const controller = new AbortController()

Step 2: You get the AbortControllers signal like this:

const signal = controller.signal

Step 3: You pass the signal to fetch like so:

fetch(urlToFetch, {
    method: 'get',
    signal: signal, // <------ This is our AbortSignal
})

Step 4: Just abort whenever you need to:

controller.abort();

Here’s an example of how it would work (works on Firefox 57+):

<script>
    // Create an instance.
    const controller = new AbortController()
    const signal = controller.signal

    /*
    // Register a listenr.
    signal.addEventListener("abort", () => {
        console.log("aborted!")
    })
    */


    function beginFetching() {
        console.log('Now fetching');
        var urlToFetch = "https://httpbin.org/delay/3";

        fetch(urlToFetch, {
                method: 'get',
                signal: signal,
            })
            .then(function(response) {
                console.log(`Fetch complete. (Not aborted)`);
            }).catch(function(err) {
                console.error(` Err: ${err}`);
            });
    }


    function abortFetching() {
        console.log('Now aborting');
        // Abort.
        controller.abort()
    }

</script>



<h1>Example of fetch abort</h1>
<hr>
<button onclick="beginFetching();">
    Begin
</button>
<button onclick="abortFetching();">
    Abort
</button>

###Sources:

#78 Best answer 2 of How do I cancel an HTTP fetch() request?(Score: 24)

Created: 2017-10-17 Last updated: 2019-03-13

https://developers.google.com/web/updates/2017/09/abortable-fetch

https://dom.spec.whatwg.org/#aborting-ongoing-activities

// setup AbortController
const controller = new AbortController();
// signal to pass to fetch
const signal = controller.signal;

// fetch as usual
fetch(url, { signal }).then(response => {
  ...
}).catch(e => {
  // catch the abort if you like
  if (e.name === 'AbortError') {
    ...
  }
});

// when you want to abort
controller.abort();

works in edge 16 (2017-10-17), firefox 57 (2017-11-14), desktop safari 11.1 (2018-03-29), ios safari 11.4 (2018-03-29), chrome 67 (2018-05-29), and later.


on older browsers, you can use github’s whatwg-fetch polyfill and AbortController polyfill. you can detect older browsers and use the polyfills conditionally, too:

import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only'
import {fetch} from 'whatwg-fetch'

// use native browser implementation if it supports aborting
const abortableFetch = ('signal' in new Request('')) ? window.fetch : fetch

See also original question in stackoverflow

#79: URL Encode a string in jQuery for an AJAX request (Score: 227)

Created: 2011-07-01 Last updated: 2016-03-27

Tags: javascript, jquery, ajax, http

I’m implementing Google’s Instant Search in my application. I’d like to fire off HTTP requests as the user types in the text input. The only problem I’m having is that when the user gets to a space in between first and last names, the space is not encoded as a +, thus breaking the search. How can I either replace the space with a +, or just safely URL Encode the string?

$("#search").keypress(function(){		
	var query = "{% url accounts.views.instasearch  %}?q=" + $('#tags').val();
    var options = {};
	$("#results").html(ajax_load).load(query);
});

#79 Best answer 1 of URL Encode a string in jQuery for an AJAX request (Score: 509)

Created: 2011-07-01 Last updated: 2021-01-26

Try encodeURIComponent.

Encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two “surrogate” characters).

Example:

var encoded = encodeURIComponent(str);

#79 Best answer 2 of URL Encode a string in jQuery for an AJAX request(Score: 22)

Created: 2013-09-26 Last updated: 2017-06-21

encodeURIComponent works fine for me. we can give the url like this in ajax call.The code shown below:

  $.ajax({
    cache: false,
    type: "POST",
    url: "http://atandra.mivamerchantdev.com//mm5/json.mvc?Store_Code=ATA&Function=Module&Module_Code=thub_connector&Module_Function=THUB_Request",
    data: "strChannelName=" + $('#txtupdstorename').val() + "&ServiceUrl=" + encodeURIComponent($('#txtupdserviceurl').val()),
    dataType: "HTML",
    success: function (data) {
    },
    error: function (xhr, ajaxOptions, thrownError) {
    }
  });

See also original question in stackoverflow

#80: How to get a cross-origin resource sharing (CORS) post request working (Score: 226)

Created: 2011-04-21 Last updated: 2011-04-22

Tags: jquery, ajax, cherrypy, cors

I have a machine on my local lan (machineA) that has two web servers. The first is the in-built one in XBMC (on port 8080) and displays our library. The second server is a CherryPy python script (port 8081) that I am using to trigger a file conversion on demand. The file conversion is triggered by a AJAX POST request from the page served from the XBMC server.

  • Goto http://machineA:8080 which displays library
  • Library is displayed
  • User clicks on ‘convert’ link which issues the following command -

jQuery Ajax Request

$.post('http://machineA:8081', {file_url: 'asfd'}, function(d){console.log(d)})
  • The browser issues a HTTP OPTIONS request with the following headers;

Request Header - OPTIONS

Host: machineA:8081
User-Agent: ... Firefox/4.01
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Origin: http://machineA:8080
Access-Control-Request-Method: POST
Access-Control-Request-Headers: x-requested-with
  • The server responds with the following;

Response Header - OPTIONS (STATUS = 200 OK)

Content-Length: 0
Access-Control-Allow-Headers: *
Access-Control-Max-Age: 1728000
Server: CherryPy/3.2.0
Date: Thu, 21 Apr 2011 22:40:29 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Content-Type: text/html;charset=ISO-8859-1
  • The conversation then stops. The browser, should in theory, issue a POST request as the server responded with the correct (?) CORS headers (Access-Control-Allow-Origin: *)

For troubleshooting, I have also issued the same $.post command from http://jquery.com. This is where I am stumped, from jquery.com, the post request works, a OPTIONS request is sent following by a POST. The headers from this transaction are below;

Request Header - OPTIONS

Host: machineA:8081
User-Agent: ... Firefox/4.01
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Origin: http://jquery.com
Access-Control-Request-Method: POST

Response Header - OPTIONS (STATUS = 200 OK)

Content-Length: 0
Access-Control-Allow-Headers: *
Access-Control-Max-Age: 1728000
Server: CherryPy/3.2.0
Date: Thu, 21 Apr 2011 22:37:59 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Content-Type: text/html;charset=ISO-8859-1

Request Header - POST

Host: machineA:8081
User-Agent: ... Firefox/4.01
Accept: */*
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://jquery.com/
Content-Length: 12
Origin: http://jquery.com
Pragma: no-cache
Cache-Control: no-cache

Response Header - POST (STATUS = 200 OK)

Content-Length: 32
Access-Control-Allow-Headers: *
Access-Control-Max-Age: 1728000
Server: CherryPy/3.2.0
Date: Thu, 21 Apr 2011 22:37:59 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Content-Type: application/json

I can’t work out why the same request would work from one site, but not the other. I am hoping someone might be able to point out what I am missing. Thanks for your help!

#80 Best answer 1 of How to get a cross-origin resource sharing (CORS) post request working (Score: 164)

Created: 2011-04-22 Last updated: 2017-05-23

I finally stumbled upon this link “https://stackoverflow.com/questions/5584923/a-cors-post-request-works-from-plain-javascript-but-why-not-with-jquery” that notes that jQuery 1.5.1 adds the

 Access-Control-Request-Headers: x-requested-with

header to all CORS requests. jQuery 1.5.2 does not do this. Also, according to the same question, setting a server response header of

Access-Control-Allow-Headers: *

does not allow the response to continue. You need to ensure the response header specifically includes the required headers. ie:

Access-Control-Allow-Headers: x-requested-with 

#80 Best answer 2 of How to get a cross-origin resource sharing (CORS) post request working(Score: 71)

Created: 2013-12-06

REQUEST:

 $.ajax({
            url: "http://localhost:8079/students/add/",
            type: "POST",
            crossDomain: true,
            data: JSON.stringify(somejson),
            dataType: "json",
            success: function (response) {
                var resp = JSON.parse(response)
                alert(resp.status);
            },
            error: function (xhr, status) {
                alert("error");
            }
        });

RESPONSE:

response = HttpResponse(json.dumps('{"status" : "success"}'))
response.__setitem__("Content-type", "application/json")
response.__setitem__("Access-Control-Allow-Origin", "*")
        
return response

See also original question in stackoverflow


Notes:
  1. This page use API to get the relevant data from stackoverflow community.
  2. Content license on this page is CC BY-SA 3.0.
  3. score = up votes - down votes.