Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Cross domain delete with jQuery

Posted on 2014-02-01
5
Medium Priority
?
461 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
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 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)
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…
Suggested Courses

661 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