Solved

Cross domain delete with jQuery

Posted on 2014-02-01
5
431 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
Comment Utility
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
Comment Utility
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 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

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 …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now