Getting bad request when calling Ext.Ajax.request - sencha-touch

Im getting a bad request when running this code
Ext.Ajax.request({
url: loginHostUri,
method:'POST',
headers:{
'Accept':'application/x-www-form-urlencoded'
},
extraParams:{
grant_type:'password',
username:username,
password:psswd,
client_id: consumerKey,
client_secret: consumerSecret
},
success: function(response){
Ext.Msg.alert('Info',reponse);
}
});
When i use the javascript debuger i get an error message
"XMLHttpRequest cannot load " "Origin null is not allowed by Access-Control-Allow-Origin."

Check the url "loginHostUri" whether it is null or not. Are you trying a cross domain request? In that case you will not be able to do that from browser (until you open the browser in unsecured mode). And Ajax requests sends parameters by "params" not "extraParams".

on the server side (JSP) I use:
response.addHeader("Access-Control-Allow-Origin", "*");
response.addHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "POST");
response.setHeader("Access-Control-Allow-Methods", "GET");
response.setHeader("Access-Control-Allow-Headers", "Content-Type");
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
response.setHeader("Access-Control-Max-Age", "86400");
and this solve the problem.

Related

Make https request with Postman with Bearer token like different user would make it

Hi all!
I'm trying to solve a bit of load testing.
Our API has throttling on that particular endpoint, but requests are disctinted by user, the system solve from the provided token.
When I trying the same scenario from different windows/browsers the throttling is working as expected but when the request sent from Postman the response is 429.
Tried the header "Connection":"close", and disabling the "User-Agent" and not allowing the cookie reuse (ARRAffinity is by default because of azure).
Tried already to run two separate request, where the first is the token request with a user then the actual request to the endpoint where the throttling is enabled.
Tried also to send the request then in the Test part as a callback after the token request sending the request to throttled endpoint like that:
pm.test("got token", function() {
let token = pm.response.json().accessToken;
pm.expect(token).to.not.be.null;
const exportRequest = {
method: 'POST',
url: `${pm.environment.get("base_URL")}/api/Export/Gtin/Excel`,
header: {
"accept": "text/plain",
"Authorization": `bearer ${token}`,
"Content-Type": "application/json-patch+json",
"Connection": "close"
},
body:JSON.stringify({
"companyPrefixId": "098102700",
"exportType": "EveryKeys",
"includeProductInfo": true,
"productInfoLanguageCodes": null,
"exportFileMainLanguageCode": "en"
})
};
pm.sendRequest(exportRequest, (err, response) => {
pm.expect(response).to.not.be.null;
if (err) {
console.log(JSON.stringify(err));
}
});
});
I hope someone can help to solve that, thanks in advance!
Best regards

Vue Resource Cross-site HTTP request

Normally, when I make a jQuery request to a non-local server, it applies Cross-site HTTP request rules and initially sends an OPTIONS request to verify the existence of an endpoint and then it sends the request, i.e.
GET to domain.tld/api/get/user/data/user_id
jQuery works fine, however I would like to use Vue Resource to deal with requests. In my network log, I see only the actual request being made (no OPTIONS request initially), and no data is being received.
Anybody has an idea how to solve this?
Sample Code:
var options = {
headers: {
'Authorization': 'Bearer xxx'
}
};
this.$http.get(config.api.base_url + 'open/cities',[options])
.then(function(response){
console.log('new request');
vm.cities = response;
}, function(error){
console.log('error in .js:');
console.log(error);
});
jquery-request
Solution:
As #Anton mentioned, it's not necessary to have both requests (environment negligible). Not sure what I have changed to make it work, but the request gave me an error. It consisted in setting the headers correctly. Headers should not be passed as options but as a property of http:
this.$http({
root: config.api.base_url + 'open/cities', // url, endpoint
method: 'GET',
headers: {
'Authorization': 'Bearer xxx'
}
}).then(function(response){
console.log('new request');
vm.cities = response;
}, function(error){
console.log('error in .js:');
console.log(error);
});
Thank you guys, it was a team effort :)
Is it a requirement that an additional OPTIONS request is being made? I have created a small (32 LOC) example which works fine and retrieves the data:
https://jsfiddle.net/ct372m7x/2/
As you can see, the data is being loaded from a non-local server. The example is located on jsfiddle.net and the request is made to httpbin.org - this leads to CORS being applied (you can see the Access-Control-Allow-Origin header in the screenshot below).
What you also see is that only the GET request has been executed, no OPTIONS before that.

CORS with Sencha Touch 2

I'm developing an application which need CORS, I did some google but could not understand that. My application is running on localhost:8000 while I'm making a ajax request to localhost:9090. Below is my Ajax request code...
Ext.Ajax.request({
url : 'http://localhost:9090/by-api',
method: 'POST',
jsonData : api_no,
disableCaching: false,
withCredentials: true,
useDefaultXhrHeader: false,
headers: {
"Content-Type":"text/plain",
'Access-Control-Allow-Orgin':'*',
'Access-Control-Headers': 'x-requested-with'
},
success: function(response){
console.log(response.responseText)
},
failure: function(response){
console.log(response.responseText)
}
});
Also I want to do a Basic Authentication so I tried putting 'Authentication' in headers but nothing is working..
The directive
'Access-Control-Allow-Orgin':'*'
must be included server side in the response header, not in the client request.
Follow this document to reference W3-CORS

OAuth Post Request Failing

I've got everything working up until Step 2 of the OAuth process where you request the actual token. I'm using a very simple jQuery Post request and constantly getting Access Control Origin errors. I've tried contentType: 'application/json' and everything else I know to try.
It's just not working and I'm not sure the problem. I've confirmed all the variables are set properly before the request. Simple post request...
var url = 'https://[STORENAMEVARIABLE].myshopify.com/admin/oauth/access_token';
var data = JSON.stringify({ client_id: apiKey, client_secret: secret, code: code });
$.ajax({
type: 'POST',
url: url,
data: data,
success: function(data) {
debugger;
},
error: function(data) {
debugger;
}
});
Any ideas what I'm doing wrong?
You need to make your OAuth requests from a server. This is the Javascript cross-domain security kicking in.
If you are using Rails you can use omniAuth and it'll take care of the whole OAuth dance for you. Otherwise you'll have to search around but most popular language have an OAuth library that you can just plug in.

mootools Request class and CORS

I'm trying to use CORS to have a script do an Ajax request to geonames.
My script calls this web service method: http://www.geonames.org/export/web-services.html#findNearby
If you check the response headers of the sample call, they include:
Access-Control-Allow-Origin: *
When I try this with mootools (version 1.4.5 just downloaded):
var urlGeonames = "http://api.geonames.org/findNearbyPlaceName";
var req = new Request({
method: 'get',
url: urlGeonames,
data: {
'lat': '89.18',
'lng': '-0.37',
'username': 'myusername',
'radius': '5'
}
}).send();
then I get an error that says :
XMLHttpRequest cannot load
http://api.geonames.org/findNearbyPlaceName?lat=89.18&lng=-0.37&username=myusername&radius=5.
Origin http://127.0.0.1 is not allowed by Access-Control-Allow-Origin.</pre>
On the other hand, when I try old style Ajax code like this:
invocation = new XMLHttpRequest();
if(invocation)
{
invocation.open('GET', urlFlickr, true);
invocation.onreadystatechange = handler;
invocation.send();
}
then it works and I get the XML response in the XHR responseXML.
I found this post A CORS POST request works from plain javascript, but why not with jQuery? that is similar. But here I'm not dealing with my server so I can only work on the javascript side.
Has anyone worked with CORS and mootools and can help on this issue ?
Thanks so much
JM
Hey man check out mootools more JSONP this will solve your problem:
http://mootools.net/docs/more/Request/Request.JSONP
Also it looks like your forgetting to ask for it in JSON format from geonames.org
Try something like:
var myJSONP = new Request.JSONP({
url: 'http://api.geonames.org/findNearbyPlaceNameJSON',
data: {
'lat': '89.18',
'lng': '-0.37',
'username': 'myusername'
},
onRequest: function(url){
// a script tag is created with a src attribute equal to url
},
onComplete: function(data){
// the request was completed.
console.log(data);
}
}).send();
Hope this helps!
The first answer on this other thread:
MooTools CORS request vs native Javascript
Might help.
Basically, the X-Requested-With header is automatically sent by the Mootools with the request, but the server either has to be configured to accept that header or you can remove it using
delete foo.headers['X-Requested-With'];
Before calling
foo.send();
To allow it by the server, you can add this to the .htaccess file of your script that gives back the JSON data:
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"
So yours would look like:
var myJSON = new Request({
url: 'http://api.geonames.org/findNearbyPlaceNameJSON',
data: {
'lat': '89.18',
'lng': '-0.37',
'username': 'myusername'
},
onRequest: function(url){
// a script tag is created with a src attribute equal to url
},
onComplete: function(data){
// the request was completed.
console.log(data);
}
});
delete myJSON.headers['X-Requested-With'];
myJSON.send();