Solved

Cross domain delete with jQuery

Posted on 2014-02-01
5
440 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 500 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Generate Numbers in JQuery file 11 66
Button function on table is in trouble 3 22
Need help with jQuery elements filtering 2 12
Button on Table, name table1 not working 4 22
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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)

860 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