im currently setting up asp.net to accept DELETE http verb in the application.
However, when i send
"DELETE /posts/delete/1"
i always get a 405 Method not allow error. I tried to take a look at the header:
Response Headers
Cache-Control private
Pragma No-Cache
Allow GET, HEAD, OPTIONS, TRACE
Content-Type text/html; charset=utf-8
Server Microsoft-IIS/7.5, Private-Server
Date Tue, 17 Nov 2009 18:30:31 GMT
Content-Length 5590
Allow GET, HEAD, OPTIONS, TRACE
notice the Allow header in IIS7, it's only allow GET HEAD OPTIONS and TRACE. I currently using [AcceptVerbs(HttpVerbs.Delete)] in my delete controller (i think this one is extended by MVCContrib, correct me if im wrong)
PS: i send DELETE using Javascript:
function _ajax_request(url, data, callback, type, method) {
if (jQuery.isFunction(data)) {
callback = data;
data = {};
}
return jQuery.ajax({
type: method,
url: url,
data: data,
success: callback,
dataType: type
});
}
and:
_ajax_request($(this).attr('href'), "", function(d) { alert("submit"); }, "json", 'DELETE');
THank you in advance!
MVC 2 has this built in. You don't need MVCContrib for it. See HtmlHelper.HttpMethodOverride and HttpDelete.
Related
Im trying to make a request from one application to another. So i created some headers which are required by my application and filled them in for the Ajax Request. Here is my code:
$.ajax({
method: 'GET',
url: 'http://my-domain.com/apps/filters/get-filters',
beforeSend: function(request){
request.setRequestHeader("X-Webshop-Domain", window.location.host);
request.setRequestHeader("X-Language", $('html').attr('lang'));
request.setRequestHeader("X-Request-Protocol", window.location.protocol);
request.setRequestHeader("X-Api-Version", '2');
},
headers: {
"X-Webshop-Domain": window.location.host,
"X-Language": $('html').attr('lang'),
"X-Request-Protocol": window.location.protocol,
"X-Api-Version": '2',
},
data: {}, success: function ( response )
{
}
});
Now when i load a page, this method is called but no response given. It gives me the "Header not allowed" issue. But when i check in my network tab (developer tools Chrome) i see my request, i see some headers but none of those. Does anybody has a idea how this is possible or what im doing wrong?
In case of CORS (cross domain requests), only basic headers are allowed. You will need to add the headers you wish to send to the server's response header:
Access-Control-Allow-Headers: X-Webshop-Domain, ...
Here's a related question you may find useful: Ajax Request header field Key is not allowed by Access-Control-Allow-Headers
Update: Two things: One, I was issuing the POST requests for jQuery and Angular from two different domains. I created a jsfiddle to test both requests from the same domain, and they both work. I tried to make the fiddle pretty general so that you can swap out the config values and test an XML POST request with basic http authentication for any site that you need to. The other thing is that, using the Angular $http service, the Data-Type header results in the following error: Request header field Data-Type is not allowed by Access-Control-Allow-Headers in preflight response. So I removed that header. I'm still troubleshooting why the request is working from one domain and not the other. Once I figure that out, I'll update and mark as resolved. /update
The following jQuery POST request with basic authentication works as expected:
var mapstory = {
xml: '<?xml version="1.0" encoding="UTF-8"?> <wfs:Transaction xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" service="WFS" version="1.0.0" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd"> <wfs:Update xmlns:feature="http://www.geonode.org/" typeName="geonode:dja_remote_service_edit_test"><ogc:Filter xmlns:ogc="http://www.opengis.net/ogc"><ogc:FeatureId fid="garbage_id" /></ogc:Filter></wfs:Update></wfs:Transaction>',
url: 'https://demo.mapstory.org/geoserver/wfs/WfsDispatcher',
auth: authToken //base64 encoded string of 'user:password'
};
$.ajax({
url: mapstory.url,
beforeSend: function(xhr) {
xhr.setRequestHeader("Authorization", "Basic " + mapstory.auth);
},
type: 'POST',
contentType: 'text/html',
dataType: 'xml',
processData: false,
data: mapstory.xml,
success: function(data) {
console.log(data);
}
});
Here are the response headers:
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Origin,Content-Type,Accept, Authorization, x-requested-with
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE
Allow: GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS
Connection: keep-alive
Content-Length: 0
Date: Fri, 01 Jul 2016 21:06:50 GMT
Server: nginx
access-control-allow-origin: http://localhost:8888
However, the following in AngularJS (v1.2.21) doesn't work:
var mapstory = {
xml: '<?xml version="1.0" encoding="UTF-8"?> <wfs:Transaction xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" service="WFS" version="1.0.0" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd"> <wfs:Update xmlns:feature="http://www.geonode.org/" typeName="geonode:dja_remote_service_edit_test"><ogc:Filter xmlns:ogc="http://www.opengis.net/ogc"><ogc:FeatureId fid="garbage_id" /></ogc:Filter></wfs:Update></wfs:Transaction>',
url: 'https://demo.mapstory.org/geoserver/wfs/WfsDispatcher',
auth: authToken //base64 encoded string of 'user:password'
};
var config = {
withCredentials: true
};
config.headers = {
'Authorization': 'Basic ' + mapstory.auth,
'Content-Type': 'text/html',
'Data-Type': 'xml'
};
$http.post(mapstory.url, mapstory.xml, config)
.success(function(data) {
console.log(data);
});
I receive the following response headers from this request:
Content-Language: en
Content-Type: text/xml;charset=UTF-8
Date: Fri, 01 Jul 2016 20:52:13 GMT
Server: WSGIServer/0.1 Python/2.7.11
Vary: Accept-Language, Cookie
X-Frame-Options: SAMEORIGIN
I get a valid XML response from the Angular request above, but the response indicates that the request wasn't authorized.
I tried swapping out the Content-Type value with application/xml, but this didn't have any effect on the result.
I've read through the Angular $http documentation and approached a number of other resources, such as this Stack Overflow question which describes a similar issue. A recommended solution is to remove the X-Requested-With default header. This step is apparently not necessary in Angular versions above 1.2 (here's a closed issue for that on Angular's Github), but I tried it anyhow. No luck.
Any guidance on this would be wonderful. Thank you very much for taking the time to read and consider this!
It looks like the server does not recognize angular as a same domain application. So what you must do is to include in the web server headers the value: access-control-allow-origin: * to allow requests from "outside" domains.
I'm calling the method in my page:
var dfd = $.Deferred(
$.getJSON(serviceAddress)
.done(function (result, status) {
bo.BusinessObject.DtosToaKoArray(result, resultList);
dfd.resolve(resultList);
})
.fail(function (result, status) {
logger.logError(result);
dfd.reject(result);
}));
return dfd;
After calling the JSON, the firebug shows that HttpRequest was successfull and the response header is like:
HTTP/1.1 200 OK
Cache-Control: no-cache
Pragma: no-cache
Content-Type: application/json; charset=utf-8
Expires: -1
Server: Microsoft-IIS/8.0
X-AspNet-Version: 4.0.30319
X-SourceFiles: =?UTF-8?B?RDpcV29ya3NwYWNlc1xNZWhyYW5cSW5mcmFzdHJ1Y3R1cmVcTWFpblxTb3VyY2VcSW5mcmFzdHJ1Y3R1cmVcU291cmNlXENhcmFuZS5HYWxheHkuV2ViQXBpXGFwaVxEYXRhUHJvdmlkZXJcTGlzdFNlcnZpY2Vc?=
X-Powered-By: ASP.NET
Date: Sun, 04 Aug 2013 05:57:39 GMT
Content-Length: 6684
but the problem is that instead of done callback, the fail callback is called with this result:
Object { readyState=4, status=404, statusText="error"}
What is wrong about my call that fails the successful http request?
Edit1.
My website (MyApp.Web) is on localhost:2771 and the calling service is in another project (MyApp.WebApi) on the localhost:4143
You will definitely run into some hurdles trying to make cross-origin requests. That includes port-to-port.
The solutions also depend on the service and what features it supports.
JSONP (or, JSON with Padding)
The service would need to accept a callback and output the JSON wrapped in a function call:
// http://...?callback=completeRequest
completeRequest(["json", "data"]);
The parameter can be a different name than callback. But, you can instruct jQuery to use it by including a placeholder parameter (...=?):
$.getJSON(serviceAddress + "?callback=?")
This can also be used in any browser as it's requested as a <script src> and the JSON will be parsed as JavaScript literals.
CORS
The service will need to support preflight, OPTIONS requests and respond with Access-Control-Allow-* headers.
Also, while most current browsers support CORS, this can be limited if you need to support older editions.
Otherwise, you'll need to create a proxy destination in your application (localhost:2771) that makes the cross-origin request server-side to the service (localhost:4143).
It might not be finding your target page and that's why you might be getting a 404 in your result object. Make sure that your serviceAddress is correct.
In addition to that When you specify: dataType: 'json' jQuery will fire the error event if the response cannot be parsed as JSON(despite the 200 reply). Make sure that the data returned from the server is valid JSON, you might want to validate the structure manually via JSONLint.
It might be any of these 2 problems.
Let's say, I have a Tornado web server (localhost) and a web page (othermachine.com), and the latter contains javascript that needs to make cross-domain ajax calls to the Tornado server.
So I set up my Tornado as such:
class BaseHandler(tornado.web.RequestHandler):
def set_default_headers(self):
self.set_header("Access-Control-Allow-Origin", "http://www.othermachine.com")
self.set_header("Access-Control-Allow-Credentials", "true")
self.set_header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,OPTIONS")
self.set_header("Access-Control-Allow-Headers",
"Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, X-Requested-By, If-Modified-Since, X-File-Name, Cache-Control")
And my javascript makes a jQuery call:
$.ajax({
type: 'GET',
url: "http://localhost:8899/load/space",
data: { src: "dH8b" },
success: function(resp){
console.log("ajax response: "+resp);
},
dataType: 'json',
beforeSend: function ( xhr ) {
xhr.setRequestHeader('Content-Type', 'text/plain');
xhr.setRequestHeader('Access-Control-Request-Method', 'GET');
xhr.setRequestHeader('Access-Control-Request-Headers', 'X-Requested-With');
xhr.withCredentials = true;
}
});
But I get the lovely XMLHttpRequest cannot load http://localhost:8899/load/space?src=dH8b. Origin http://www.othermachine.com is not allowed by Access-Control-Allow-Origin error. I can't tell which side of jQuery / Tornado (or both?) am I not setting up correctly.
According to dev tools, these are the headers the jQuery request is sending:
Request Headers
Accept:*/*
Origin:http://www.othermachine.com
Referer:http://www.othermachine.com/athletes.html?src=BCYQ&msgid=6xjb
User-Agent:Mozilla/5.0 ...
If I simply make a request from my browser's url field I get a '200 OK' with this:
Response Headers
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:Content-Type, User-Agent, X-Requested-With, X-Requested-By, Cache-Control
Access-Control-Allow-Methods:GET,POST
Access-Control-Allow-Origin:http://www.othermachine.com
Content-Length:0
Content-Type:text/html; charset=UTF-8
Server:TornadoServer/2.2.1
Does that mean Tornado is doing its job? I tried to follow the advice of all the stackoverflow CORS+jQuery posts (e.g. this), to no avail. CORS in concept seems simple enough, but maybe I am fundamentally misunderstanding what is supposed to happen in a CORS transaction... please help! Thanks in advance.
Nevermind, coding too late and too long causes one to trip over things the size of typos. For the record, this is all you need for jQuery:
var data = { msgid: "dH8b" },
url = "http://localhost:8899/load" + '?' + $.param(data);
$.getJSON( url, function(resp){
console.log("ajax response: "+resp+" json="+JSON.stringify(resp));
});
And this is all you need for Tornado:
class BaseHandler(tornado.web.RequestHandler):
def set_default_headers(self):
self.set_header("Access-Control-Allow-Origin", "http://www.othermachine.com")
Using jQuery 1.7.2, Tornado 2.2.1.
try setting origin to be: othermachine.com. it should be a domain name, not a website address
I am trying to follow option #3 in the solution at this SO post: A controller action which returns a partial view inserts the logon page when authorization fails
I'm running into a problem reading my custom header in the ajaxComplete method in jquery.
I have confirmed in fiddler and in chrome's debug tools that the custom header is in fact being sent back and received by the browser...
Response Headers (in Fiddler):
Server: ASP.NET Development Server/10.0.0.0
Date: Sun, 15 Jan 2012 04:00:13 GMT
X-AspNet-Version: 4.0.30319
X-AspNetMvc-Version: 3.0
Unauthorized: 1
Cache-Control: private
Content-Length: 0
Connection: Close
Response Headers (as received by Chrome):
Cache-Control:private
Connection:Close
Content-Length:0
Date:Sun, 15 Jan 2012 04:12:13 GMT
Server:ASP.NET Development Server/10.0.0.0
Unauthorized:1
X-AspNet-Version:4.0.30319
X-AspNetMvc-Version:3.0
Response Headers (as found from calling "getAllResponseHeaders()" on the xmlHttpRequest variable passed into ajaxComplete):
Date: Sun, 15 Jan 2012 04:42:21 GMT
X-AspNet-Version: 4.0.30319
Connection: Close
Content-Length: 65
X-AspNetMvc-Version: 3.0
Server: ASP.NET Development Server/10.0.0.0
Content-Type: application/json; charset=utf-8
Cache-Control: private
Interestingly, the function that is called upon the return of the original ajax request (as initiated by jquery) does receive the Unauthorized header.
Does anyone know what's going on here and what I can do to solve this issue?
Here's my "ajaxComplete" javascript code
$(document).ajaxComplete(function (event, request, settings) {
alert(request.getResponseHeader('Unauthorized'));
});
You can take a look here. It might be helpful if you are using the same plugin (ajaxmanager) on your page. If not, check your other plugins.
Vucetica's initial response got me thinking and I spent the last hour looking through jquery's code. I have my custom header coming back now. It looks like the trouble stemmed from an unhandled exception in my code within the success callback of the original ajax request.
Definitely something I should fix, but it seems odd that jquery would allow itself to be susceptible to that in a way that it fails silently and only affecting the custom headers. This unexpected behavior really led me in the wrong direction initially.
Anyway, thanks for your help everyone.
For completeness sake, here is my code before and after.
Before (no custom headers received in the ajaxComplete method)
$.ajax({
type: "GET",
url: "/Game/GetPlay/27?roundId=" + that.gameState.RoundToDisplay,
contentType: "application/json; charset=utf-8",
data: {},
dataType: "json",
success: function (play, request, settings) {
that.play = play;
that.startGame();
},
error: null,
cache: false
});
After (working)
$.ajax({
type: "GET",
url: "/Game/GetPlay/27?roundId=" + that.gameState.RoundToDisplay,
contentType: "application/json; charset=utf-8",
data: {},
dataType: "json",
success: function (play, request, settings) {
that.play = play;
try {
that.startGame();
} catch(err){
}
},
error: null,
cache: false
});