xhrPost seems to be modifying the URL resulting in either 404 or 405.
This is from a custom widget and attempting to go to a REST service on a WebSphere Liberty server.
The rest service responds correctly when using RESTClient and building the request manually.
I am using var jsonData = JSON.stringify(domForm.toObject("TaskTemplate")); so I can verify the data is correct and sending the data as that string:
data: jsonData,
the URL is hardcoded in the form and no substitution is currently being used:
<form id="TaskTemplate" name="TaskTemplate"
data-dojo-attach-point="taskTemplateNode"
method="POST"
action="http://localhost:9080/test2/rm/tasks/64/update">
I also have a GET with a URL of "http://localhost:9080/test2/rm/tasks/64/" that is working fine.
Seems to be associated with PUT or POST...
When I do the xhrPost, I am getting the following error:
"NetworkError: 404 Not Found - http://localhost:9080/test2/undefined"
since "undefined" is seen, it is like xhrPost is doing some substitution in the hardcode URL...
I am using 1.9.2-20140219-IBM version of dojo which comes with Rational Application Developer.
I have tried both xhrPost and xhrPut with the same results.
Here is the method that is invoked when the button is pushed:
applySubmit: function() {
console.log("inside applySubmit");
var jsonData = JSON.stringify(domForm.toObject("TaskTemplate"));
console.log(jsonData);
var xhrArgs = {
// url: "http://localhost:9080/test2/rm/tasks/64/update",
data: jsonData,
preventCache: true,
timeout: 10000,
handleAs: "text",
contentType: "application/json",
load: function(data) {
console.debug("applySubmit success:" + data);
},
error: function(data) {
console.debug("applySubmit error:");
}
};
console.log("doing dojo.xhrPxxx(xhrArgs);");
var deferred = dojo.xhrPost(xhrArgs); // any need to save local var and exit?
}
In the server logs, I am seeing [WARNING ] SRVE0190E: File not found: /undefined
and that is coming from the webcontainer (makes sense given the error msg above)
So, this means it is not related to my rest service, never gets to it.
This is really starting to delay our project, so any ideas about why this might be occurring would be greatly appreciated!
Related
I have looked all over and have found similar solutions, but nothing that matches exactly what I'm working on.
We have a .net core MVC website with an API Controller for handling requests from an ionic mobile app which we are also developing.
In most cases, adding [ValidateAntiForgeryToken] to the API controller actions works. I have gone through the process of generating the token, passing it to Ionic, and storing it in the request headers for validation.
Here is the code I am using to fetch and store the token:
static XSRF_TOKEN_KEY: string = "X-XSRF-TOKEN";
static XSRF_TOKEN_NAME_KEY: string = "X-XSRF-TOKEN-NAME";
constructor(){}
static getXsrfToken(http: HTTP) : {tokenName: string, token: string} {
let tokenName: string = window.sessionStorage.getItem(ValidationManager.XSRF_TOKEN_NAME_KEY);
let token: string = window.sessionStorage.getItem(ValidationManager.XSRF_TOKEN_KEY);
if(!tokenName || !token){
this.fetchXsrfToken(http);
tokenName= window.sessionStorage.getItem(ValidationManager.XSRF_TOKEN_NAME_KEY);
token = window.sessionStorage.getItem(ValidationManager.XSRF_TOKEN_KEY);
}
return {
tokenName: tokenName,
token: token
};
}
private static setXsrfToken({ token, tokenName }: { token: string, tokenName: string }) {
window.sessionStorage.setItem(ValidationManager.XSRF_TOKEN_KEY, token);
window.sessionStorage.setItem(ValidationManager.XSRF_TOKEN_NAME_KEY, tokenName);
}
private static fetchXsrfToken(http: HTTP) {
let token: string = window.sessionStorage.getItem(ValidationManager.XSRF_TOKEN_KEY);
let tokenName: string = window.sessionStorage.getItem(ValidationManager.XSRF_TOKEN_NAME_KEY);
if (!token || !tokenName) {
let apiUrl: string = AppConfig.apiUrl + "/GetAntiforgeryToken";
http.get(apiUrl, {}, {})
.then(r => this.setXsrfToken(JSON.parse(r.data)))
.catch(r => console.error("Could not fetch XSRFTOKEN", r));
} else {
this.setXsrfToken({ token: token, tokenName: tokenName });
}
}
Here is the action in my controller that serves anti forgery tokens:
[HttpGet]
public override IActionResult GetAntiforgeryToken()
{
var tokens = _antiforgery.GetAndStoreTokens(HttpContext);
return new ObjectResult(new
{
token = tokens.RequestToken,
tokenName = tokens.HeaderName
});
}
I set the headers of the http plugin by calling this function from the view's associated typescript file:
initializeHttp() {
let token = ValidationManager.getXsrfToken(this.http);
this.http.setHeader(token.tokenName, token.token);
console.log("Http Initialized: ", token);
}
then any request I make with the http plugin is validated properly in the controller's action:
this.http.post(apiUrl, {}, {}).then(response => {
that.navCtrl.setRoot(HomePage);
});
Up to this point, everything works great. The problem arises when I try to use XmlHttpRequest to for a POST instead of the built-in http plugin:
let file = {
name: e.srcElement.files[0].name,
file: e.srcElement.files[0],
};
let formData: FormData = new FormData();
formData.append('file', file.file);
let xhr: XMLHttpRequest = new XMLHttpRequest();
xhr.open('POST', apiUrl, true);
console.log("setting request header: ", tokenVal); //verify that tokenVal is correct
xhr.setRequestHeader("X-XSRF-TOKEN", tokenVal);
xhr.send(formData);
If I remove the [ValidateAntiForgeryToken] attribute from the controller's action, the file is posted properly. However, nothing I have tried has worked with the attribute being included.
I believe the issue has something to do with the validation tokens being added to a cookie automatically by Ionic, and the cookie is passed along with the request from the http plugin. However, XMLHttpRequest does not pass the cookie along (and is unable to do so?).
I have read up on the subject quite a bit over the past few days but I admit that this validation is still mostly a black box to me. Is there a way to validate the request in my action using only the token which is passed up in the header?
The reason I am running into this problem is that I need to upload a file, which I was unable to do using the http plugin. There are solutions for uploading images using Ionic's file-transfer plugin, but it has been deprecated and the release notes suggest using XmlHttpRequest instead.
Other things I have tried:
I have found solutions for .net standard which use System.Web.Helpers.AntiForgery for custom validation on the server, but this namespace is not included in .net core and I could not find an equivalent.
I tried many different ways to post the file using the http plugin (since it has no issues validating the antiForgery token). Everything I tried resulted in the action being hit but the file being posted was always null. A solution which uploads a file using the http plugin would also be acceptable.
Why is it that I was able to spend two full days on this problem, but as soon as I post a question about it, I find the answer? Sometimes I think the internet gods are just messing with me.
As it turns out, the native http plugin has an uploadFile() function that I never saw mentioned anywhere else. Here's what the solution does:
Use the fileChooser plugin to select a file from the phone's storage
Use the filePath plugin to resolve the native filesystem path of the image.
Use http.uploadFile() instead of http.post()
This works because as mentioned above, I was able to properly set the validation token in the http plugin's header to be accepted by the controller.
And here is the code:
let apiUrl: string = AppConfig.apiUrl + "/UploadImage/";
this.fileChooser.open().then(
uri => {
this.filePath.resolveNativePath(uri).then(resolvedPath => {
loader.present();
this.http.uploadFile(apiUrl,{ },{ },resolvedPath, "image")
.then(result => {
loader.dismiss();
toastOptions.message = "File uploaded successfully!";
let toast = this.toastCtrl.create(toastOptions);
toast.present();
let json = JSON.parse(result.data);
this.event.imageUrl = json.imgUrl;
})
.catch(err => {
console.log("error: ", err);
loader.dismiss();
toastOptions.message = "Error uploading file";
let toast = this.toastCtrl.create(toastOptions);
toast.present();
});
});
}
).catch(
e => console.log(e)
);
Defined as a model and its associations, I wish the http calls to follow best practices of restful. For example, if I make the call
user.posts();
I wish to run a call http defined as
users/1/posts
If a call is then put on post with id 32 then the url of reference must be
users/1/posts/32
So I want to avoid using the filter property as is the default for a get
/posts.php?filter=[{"property":"user_id","value":1}]
This is because the api rest are already defined and I can not change them.
I would like to build a minimally invasive solution and reading on various forums the best way is to do an ovveride the method buildURL the proxy rest but was not able to retrieve all the data needed to build the final URL. Can anyone give me an example?
thanks
Try the following:
window.serverUrl = "192.168.1.XX"
var service = "login.php"
var dataTosend: {
username:"xx",
password: "yy"
}
var methode:"POST" / "GET"
this.service(service,methode,dataTosend,onSucessFunction,onFailureFunction);
onSucessFunction: function(res) {
alert("onSucessFunction"):
},
onFailureFunction: function(res) {
alert("onFailureFunction"):
},
service: function(svc, callingMethod, data, successFunc, failureFunc) {
Ext.Ajax.request({
scope: this,
useDefaultXhrHeader: false,
method: callingMethod,
url: window.serverUrl + svc,
params: data,
reader: {
type: 'json'
},
failure: failureFunc,
success: successFunc
});
I hope this will solve your problem...
I am using play 2.2.0
I have a Global object settings defined with methods onError and onHandlerNotFound overridden. From view I am making ajax call which throws 500 internal server due to sql syntax issue, but I am not able to see 500 internal page that I have setup in onError method, but I can see NotFound page if handler is not found. Is it something expected because I am using ajax request.
object Global extends WithFilters(LogFilter) with GlobalSettings {
override def onError(request: RequestHeader, ex: Throwable) = {
Future.successful(InternalServerError(
views.html.error(ex)
))
}
...
}
I suppose that is expected, as your two ajax requests are most likely different (as Ashalynd mentioned, post your frontend code). Where you do your ajax request capture the response and redirect accordingly. E.g. with jQuery:
$.ajax({
url: "http://wherever.com",
type: 'GET',
success: function(msg) {
// Do successful things
},
error: function (xhr, ajaxOptions, thrownError) {
// Redirect
window.location.href = "/errorpage.html";
// Or some weird form of "redirect" (don't use this, just
// for demonstration purpose, showing how you can capture
// whatever you sent along with your error)
var responseText = $.httpData(xhr);
document.body.innerHtml = responseText;
}
});
It's a feature of Play! 2.2. I have the same problem with Play! 2.2.1, Java API and using curl from command line. It's just that onHandlerNotFound works as specified, but onError just leaves the HTTP connection hanging and never returns a response.
Downgrading to 2.1.5 fixes the problem.
i have tried to send uploaded file to server by using ajax like this
formData.append('foldername',fname);
formData.append('file', file)
$.ajax({
url: 'imageupload',
data: formData,
processData: false,
contentType: false,
type: 'POST',
success:function(response)
{
alert(response);
alert(response.imagename);
}
});
it is send data to server successfully but i have sent response from server like this
res.writeHead(200,{'Content-Type':'text/html', 'Access-Control-Allow-Orgin':'*'});
res.write(JSON.stringify({"imagename":"1.jpeg","imageid":"xxxxxxxxxxxxxxxxxxx"}));
res.end();
i have written two alert in success function . in first alert i got like this
{"imagename":"1.jpeg","imageid":"xxxxxxxxxxxx"}
i have written second alert for to get imagename but i got undefine
so i could not get specific key value. how to resolve this?
change
res.writeHead(200,{'Content-Type':'text/html', 'Access-Control-Allow-Orgin':'*'});
to
res.writeHead(200,{'Content-Type':'application/json', 'Access-Control-Allow-Orgin':'*'});
jquery don't convert a JSON string to Javascript Object if the content type is 'Content-Type':'text/html'. So, 'Content-Type':'application/json' or 'Content-Type':'text/json' will do the magic. You will get the response as Javascript object in the client. So, you can do
alert(response.imagename);//alerts image name
I'm building upon RESTFul Store example of ExtJs 4. I'd like my script to display errors provided by the REST server, when either Add or Delete request fails. I've managed to obtain the success status of a request (see the code below), but how do I reach the message provided with the response?
Store:
var store = Ext.create('Ext.data.Store', {
model: 'Users',
autoLoad: true,
autoSync: true,
proxy: {
type: 'rest',
url: 'test.php',
reader: {
type: 'json',
root: 'data',
model: 'Users'
},
writer: {
type: 'json'
},
afterRequest: function(request, success) {
console.log(success); // either true or false
},
listeners: {
exception: function(proxy, response, options) {
// response contains responseText, which has the message
// but in unparsed Json (see below) - so I think
// there should be a better way to reach it than
// parse it myself
console.log(proxy, response, options);
}
}
}
});
Typical REST response:
"{"success":false,"data":"","message":"VERBOSE ERROR"}"
Perhaps I'm doing it all wrong, so any advice is appreciated.
I assume that your service follows the REST principle and uses HTTP status codes other than 2xx for unsuccessful operations.
However, Ext will not parse the response body for responses that do not return status OK 2xx.
What the exception/response object (that is passed to 'exception' event listeners) does provide in such cases is only the HTTP status message in response.statusText.
Therefore you will have to parse the responseText to JSON yourself. Which is not really a problem since it can be accomplished with a single line.
var data = Ext.decode(response.responseText);
Depending on your coding style you might also want to add some error handling and/or distinguish between 'expected' and 'unexpected' HTTP error status codes. (This is from Ext.data.reader.Json)
getResponseData: function(response) {
try {
var data = Ext.decode(response.responseText);
}
catch (ex) {
Ext.Error.raise({
response: response,
json: response.responseText,
parseError: ex,
msg: 'Unable to parse the JSON returned by the server: ' + ex.toString()
});
}
return data;
},
The reason for this behavior is probably because of the REST proxy class not being a first class member in the data package. It is derived from a common base class that also defines the behavior for the standard AJAX (or JsonP) proxy which use HTTP status codes only for communication channel errors. Hence they don't expect any parsable message from the server in such cases.
Server responses indicating application errors are instead expected to be returned with HTTP status OK, and a JSON response as posted in your question (with success:"false" and message:"[your error message]").
Interestingly, a REST server could return a response with a non-2xx status and a response body with a valid JSON response (in Ext terms) and the success property set to 'true'. The exception event would still be fired and the response body not parsed.
This setup doesn't make a lot of sense - I just want to point out the difference between 'success' in terms of HTTP status code compared to the success property in the body (with the first having precedence over the latter).
Update
For a more transparent solution you could extend (or override) Ext.data.proxy.Rest: this will change the success value from false to true and then call the standard processResponse implementation. This will emulate 'standard' Ext behavior and parse the responseText. Of course this will expect a standard JSON response as outlined in your original post with success:"false" (or otherwise fail).
This is untested though, and the if expression should probably be smarter.
Ext.define('Ext.ux.data.proxy.Rest', {
extend: 'Ext.data.proxy.Rest',
processResponse: function(success, operation, request, response, callback, scope){
if(!success && typeof response.responseText === 'string') { // we could do a regex match here
var args = Array.prototype.slice.call(arguments);
args[0] = true;
this.callParent(args);
} else {
this.callParent(arguments);
}
}
})