Ajax cross-domain request to REST api

Question

I have REST api on backend. I need to make ajax request to POST some data and I write:

$(function() { 
    $('#createPin').click(function(e) { 
        e.preventDefault();

var urlAjax = "http://www.agroagro.com/test/v1/register";

$.ajax({
type: "POST",
url: urlAjax,
contentType: "application/x-www-form-urlencoded",
data: {
                    name: "Mile3",
                    email: "new1@new.com",
                    password: "face1book"
                },
  crossDomain:true, 
  success: function(data) { console.log(data); },
error: function(data) {console.log(data); },
dataType: 'json',
beforeSend: function (xhr) {
            xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
        },
        headers: {
            'Access-Control-Allow-Origin': '*'
        }
});


}); 
});

but on click I get:

         OPTIONS http://www.agroagro.com/test/v1/register jquery-latest.min.js:4 sendjquery-latest.min.js:4 m.extend.ajaxtest.html:114 (anonymous function)jquery-latest.min.js:3 m.event.dispatchjquery-latest.min.js:3 r.handle

    XMLHttpRequest cannot load http://www.agroagro.com/test/v1/register. Invalid HTTP status code 404

    Object {readyState: 0, getResponseHeader: function, getAllResponseHeaders: function, 

setRequestHeader: function, overrideMimeType: function…}

But when I try to run http://www.agroagro.com/test/v1/register on Chrome Advanced Rest Client extension then all works fine... How and why? What is wrong with my ajax request?

See IMAGE: https://i.stack.imgur.com/XnZCX.png - as you can see all works great with that extension cross domain.

try faking the request by sending origin and user-agent headers — Cerlin, Nov 28 '14 at 09:54
record the ajax request/response (using network tab in developer tools) and share it here. — Cerlin, Nov 28 '14 at 09:59
its so strange how Chrome Rest client extension works great and my ajax request not SEE: http://i.imgur.com/Ms0oBK9.png — LaraBeginer, Nov 28 '14 at 10:04
try adding `xhrFields: {withCredentials: true }` to your ajax request — Cerlin, Nov 28 '14 at 10:10
Now I get: XMLHttpRequest cannot load http://www.agroagro.com/test/v1/register. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://agroagro.com' is therefore not allowed access. — LaraBeginer, Nov 28 '14 at 10:13
@LaraBeginer — So set the specific origin instead of using a wildcard. — Quentin, Nov 28 '14 at 10:21
I write answer for working example but why XHR this work and ajax dont? — LaraBeginer, Nov 28 '14 at 12:07

mynetx · Answer 1 · 2014-11-28T10:40:19.307

2

It is your backend API that needs to return the proper CORS header. In the easiest variant, just have the server reply to the preflight request (HTTP OPTIONS verb) with this header:

Access-Control-Allow-Origin: *

When you already have this response header set up, please note that your question shows a 404 code (Not Found). When I browse to http://www.agroagro.com/test/v1/register, I am seeing a 404, too. This may only be the case for GET requests, though.

By setting the crossDomain property to true, you are telling jQuery to send a JSONP request. A JSONP request works by embedding a <script> tag into the body, which triggers a GET request.

When the server is equipped with the proper CORS headers, you should disable crossDomain. Since, according to the jQuery documentation, crossDomain defaults to true if the target domain differs from the domain of the currently open web page, use this snippet:

$.ajax({ type: "POST", crossDomain: false, // ... });

For cross-domain requests, the browser sends a preflight request like this first:

OPTIONS /test/v1/register HTTP/1.1
Host: www.agroagro.com
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://agroagro.com
User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.62 Safari/537.36
Access-Control-Request-Headers: access-control-allow-origin, accept, x-requested-with, content-type
Accept: */*
Referer: http://agroagro.com/test.html
Accept-Encoding: gzip, deflate, sdch
Accept-Language: de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4

To find out if the browser may send the POST request, the server response is checked for an Access-Control-Allow-Origin header. However, when receiving the above request, the API server replies like this:

HTTP/1.1 200 OK
Date: Fri, 28 Nov 2014 10:37:18 GMT
Content-Type: text/plain
Content-Length: 0
Connection: keep-alive
Set-Cookie: __cfduid=d57edcdbd0a20a0d11df4dda7c3753d611417171038; expires=Sat, 28-Nov-15 10:37:18 GMT; path=/; domain=.agroagro.com; HttpOnly
Allow: POST,OPTIONS,GET,HEAD
Set-Cookie: PH_HPXY_CHECK=s1; path=/
Cache-control: private
Server: cloudflare-nginx
CF-RAY: 1905edebcdb50f69-FRA

As you can see, there is no Access-Control-Allow-Origin header returned for the OPTIONS request.

Solution: Have the API endpoint return the Access-Control-Allow-Origin header not only for the POST request, but rather for the preflight OPTIONS request.

edited Nov 28 '14 at 10:40

answered Nov 28 '14 at 09:57

mynetx

878
7
25

but I put that header into backend... also how chrome extension can work well and send good data? – LaraBeginer Nov 28 '14 at 09:59
ok, yes, but this is backedn stuff that developer to work like that ... but try with Chrome rest extension then works fine, also works fine with same hosting request – LaraBeginer Nov 28 '14 at 10:06
@LaraBeginer — The chrome extension is software installed in the user's browser and given permission to access arbitary other websites. Your JavaScript is not. – Quentin Nov 28 '14 at 10:20
Again I get: XMLHttpRequest cannot load http://www.agroagro.com/test/v1/register. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://agroagro.com' is therefore not allowed access. – LaraBeginer Nov 28 '14 at 10:23
@Quentin but Chrome extension also send cross-domain request – LaraBeginer Nov 28 '14 at 10:24
@LaraBeginer — Because it is a Chrome extension that the user explicitly installed and not JS on a webpage the user happened to visit. – Quentin Nov 28 '14 at 10:26
I testing app from a browser , please go at http://agroagro.com/test.html click on button then go to console log – LaraBeginer Nov 28 '14 at 10:27
@LaraBeginer As outlined in the last part of my answer, your code has `crossDomain:true`. Please set this to `false` to disable `JSONP` in favor of normal `CORS` requests. – mynetx Nov 28 '14 at 10:29
@LaraBeginer See the second part of my edited answer, below the horizontal line. – mynetx Nov 28 '14 at 10:41
If I make .apk phonegap native app (in which behind is browser) can I use rest as Chrome extension does? – LaraBeginer Nov 28 '14 at 10:45
“PhoneGap you can just XHR directly to remote servers and it should ‘just work’. Cross-domain policy does not apply to PhoneGap.” – As answered here: http://stackoverflow.com/a/21299355/486298 – mynetx Nov 28 '14 at 10:46
SO with PhoneGap this will work just fine witout any changes? – LaraBeginer Nov 28 '14 at 10:48
Exactly. Just leave `crossDomain` to `false`. – mynetx Nov 28 '14 at 10:49
I try with PhoneGap emulator: http://www.agroagro.com/test.html?enableripple=cordova but dont work – LaraBeginer Nov 28 '14 at 11:08
I write answer for working example but why this work and ajax dont? – LaraBeginer Nov 28 '14 at 12:06

score 0 · Accepted Answer · answered Nov 28 '14 at 10:16

0

send the below headers from your server

Access-Control-Allow-Origin : THE SITE FROM WHICH YOU WILL MAKE THE AJAX REQUEST
Access-Control-Allow-Credentials : true

then in jquery add the below code

xhrFields: {withCredentials: true }

answered Nov 28 '14 at 10:16

Cerlin

6,622
1
20
28

yes but I dont know which domain will be becouse I create mobile phonegap app and that app dont have url – LaraBeginer Nov 28 '14 at 10:17
I add header: header("Access-Control-Allow-Credentials : true"); but again is the same – LaraBeginer Nov 28 '14 at 10:20
if the request is send from a mobile app then you dont need anything like `Access-Control-Allow-Origin`, but if you send the request from some website based IDE then you need to worry about all thest things. i think you are testing the app from a web based IDE am i right? – Cerlin Nov 28 '14 at 10:21
i testing app from a browser ... please go at: http://agroagro.com/test.html and click on button then see console – LaraBeginer Nov 28 '14 at 10:26
thats the point. run it from mobile not from a typical web browser – Cerlin Nov 28 '14 at 10:30
but phonegap works like native app but in behind phonegap is just mobil browser – LaraBeginer Nov 28 '14 at 10:32
yes that is correct. when you run the ajax from `agroagro.com/test.html` (in web browser) its considered as the reques is sent from agroagro.com but if you run it in mobile it will act just like your Rest Client (chrome extension) – Cerlin Nov 28 '14 at 10:35
NO. export it as an apk then install it and run it – Cerlin Nov 28 '14 at 10:37
Are you sure about that? – LaraBeginer Nov 28 '14 at 10:45
I have got one issue for my app and it was fixed like this – Cerlin Nov 28 '14 at 10:46
You think that this will work witout issue if the ajax request come from native app? – LaraBeginer Nov 28 '14 at 10:48
YES it will. (try that and please share the feedback so that others can get benefit) – Cerlin Nov 28 '14 at 10:52
I try with: PhoneGap emulator but dont work: http://www.agroagro.com/test.html?enableripple=cordova – LaraBeginer Nov 28 '14 at 11:07
I write answer for working example but why this work and ajax dont? – LaraBeginer Nov 28 '14 at 12:07

Ajax cross-domain request to REST api

2 Answers2