53

I have found this very useful Chrome extension called Postman. This is a very useful extension especially when you are into programming RESTful applications.

One thing I am confused on is that how this plugin/extension able to send POST request successfully on different domains?

I tried voting in a poll using Postman like this.

Voting using Postman

After submitting that, the vote was actually counted in, but when I tried doing that using AJAX and JavaScript, it fails, because of different origin policy of browsers.

How is that even possible?

Here is my code using jQuery. I used that in my computer though, localhost.

init: function() {
    $.ajax({
        url: 'http://example.com/vote.php',
        type:'POST',
        dataType: 'html',
        data: {
            id: '1'
        },
        success: function(data) {
        if ( data == 'voted' ) {
            $('.set-result').html( 'you already voted. try again after 24 hours' );
        } else {
            $('.set-result').html( 'successfully voted' );
        }
    }
    });
},
5
  • 2
    It appears as though the extension works by posting to getpostman.com rather than your target domain (using CORS), getpostman.com's server then makes the request and returns a response. github.com/a85/POSTMan-Chrome-Extension/blob/master/chrome/js/…
    – Kevin B
    Apr 15, 2013 at 17:47
  • this seems legit, i'll read through their code then, I might try to come up with the same solution. Apr 15, 2013 at 17:51
  • Note however that to implement CORS in IE, you have to alter jQuery by including an alternative transport. IE7 doesn't support CORS at all.
    – Kevin B
    Apr 15, 2013 at 17:52
  • no problem about that.. Apr 15, 2013 at 18:43
  • 2
    @KevinB, Not true. It works when I tested a local server that obviously couldn't be accessed from gepostman.com's server.
    – Pacerier
    Dec 11, 2014 at 8:46

4 Answers 4

36

Chrome packaged apps can have cross domain permissions. When you install Postman it promts you that this app will access any domain.

By placing */* in permissions section of your manifest file, you can do this.

Read more here: https://developer.chrome.com/extensions/xhr.html

7
  • 2
    How can that be? Doesn't the website itself have to also allow CORS? Dec 8, 2014 at 20:22
  • 1
    @Imray There is no need for CORS headers, just like a server program or curl.
    – Mohsen
    Dec 9, 2014 at 6:05
  • So basically, a Chrome app is not subject to Cross Origin security? So a Chrome app can access my bank cookies, or my Facebook login? Dec 9, 2014 at 11:46
  • @Imray Chrome apps can bypass Cross Origin. Chrome will not share your regular browsing sessions with this permission. But if you install a Chrome extension that can execute content script sure they can access your bank cookies!
    – Mohsen
    Dec 10, 2014 at 4:26
  • 1
    @Imray, Obviously if you click "Allow This" and "Allow That" the app can do anything it wants among the privileges that you've allowed it to.
    – Pacerier
    Dec 11, 2014 at 8:48
26

You can add the following header to sent Ajax request in postman.

Content-Type      application/json

X-Requested-With  XMLHttpRequest

Screenshot

Send Ajax request in postman

3

Sounds like the site that hosts the poll (the "vote.php" script) needs to have an "Access-Control-Allow-Origin" header set to allow posting from a list of sites (or all sites).

A value of * for the header will allow posting from any website:

Access-Control-Allow-Origin: *

i.e. You could put the following at the top of vote.php

header('Access-Control-Allow-Origin: *');

Chrome extensions and apps are not subject to the same security limitations placed on normal webpages.

Additional debugging tips:

If you're trying to access remote services from web pages you have open on your local file system in your browser, you might find your browser applies different security rules to them than it does to files served from a web service.

e.g. If you open local files from a locational like C:\MyDocuments\weboot\index.htm (Windows) or \Users\joe\Sites\index.html (Mac) in your browser your AJAX request might not work, even with the header specified in most browsers.

Apple's Safari applies almost no cross domain restrictions to files opened locally but Firefox is much more strict about what it permits, with Chrome somewhere in the middle. Running a web server locally (e.g. on http://localhost/) is a good idea to avoid unexpected behaviour.

Additionally, other libraries that provide functions to handle Ajax requests (such as AngularJS) may require other headers to be set on the server by default. You can usually see the reason for failure in a browser debug console.

0

2021 Oct

In my investigation, I found out that you need an extra field in the header of your request. So simply add the following key-value into the header:

key: X-Requested-With | value: XMLHttpRequest

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.