Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Cross domain delete with jQuery

Posted on 2014-02-01
5
Medium Priority
?
464 Views
Last Modified: 2014-02-22
I have a node js server listening and parsing urls, functioning as an RESTful api. I am using this code to access a function using a delete request:

function DeleteJob(jobid, apiUrl) {
	if(adssApiUrl.slice(-1) == "/") apiUrl = apiUrl.substring(0, apiUrl.length - 1);
	$.ajax({
	    type: 'DELETE',
	    url: apiUrl + '/jobs/' + jobid,
	    async: false,
	    cache: false,
	    success: function(result) {
	        $('#' + jobid).fadeOut('slow', function() {
				$(this).remove();
			});
	    }
	});
}

Open in new window


I am getting:
XMLHttpRequest cannot load http://blablabla:443/jobs/521e09af525d4ed866000000. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://blablabla' is therefore not allowed access.

How do I do cross domain requests with jQuery so this will work? When I use the Advanced Rest Client plugin in Chrome, the request succeeds, so I guess the browser is not allowing my request while the plugin I am using does not have this kind of restriction.
0
Comment
Question by:itnifl
  • 3
  • 2
5 Comments
 
LVL 5

Expert Comment

by:Alex Ene
ID: 39826225
Try adding the {dataType:'jsonp'} to the ajax settings.
Also, could be slightly unrelated but you're doing request through port 443 which is HTTPS from a URL that starts with HTTP. Cross-protocol could also be an issue. Try using protocol-less URLs and have them declared throughout code like href="//blablabla/jobs/hashkey"
0
 
LVL 2

Author Comment

by:itnifl
ID: 39826282
When using dataType:'jsonp', my delete request ends up as a get request at the node js api server, which in turn does not delete the record I am wanting to delete, but returns it in the json format.
0
 
LVL 5

Accepted Solution

by:
Alex Ene earned 2000 total points
ID: 39826350
Yes, true. Completely forgot about JSONP only working as GET requests.
JQuery documentation for ajax says that the type parameter although supports PUT/DELETE, not all browsers handle it very well. Assuming you are using Chrome though, so this is less likely the root cause. IE10+ though, according to caniuse has a problem with using different ports.

Are you sure the node.js server accepts the DELETE method? Check this out.
Maybe this helps a bit more.
Try showing us the HTTP headers.
0
 
LVL 2

Author Comment

by:itnifl
ID: 39855443
I am very sure the server accepts a delete method. When using the "Advanced REST client" plugin for Chrome, I have no problem sending a delete request and getting the expected result.

I will have to come back to you on using CORS. I would guess that would be the solution.
0
 
LVL 2

Author Closing Comment

by:itnifl
ID: 39879484
Yes, CORS was the solution. Since I was using Express with nodejs, I used this guide in stead, short simple and right on spot:
http://bannockburn.io/2013/09/cross-origin-resource-sharing-cors-with-a-node-js-express-js-and-sencha-touch-app/

I placed app.use() in app.configure though:
app.configure(function () {
    app.use(enableCORS);
});
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

916 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question