PDA

View Full Version : My ExtJS store AJAX or Rest calls are not working despite working in Curl and jQuery



mitts2010
20 Feb 2014, 11:24 AM
This is my store:



Ext.define('testApp.store.Users', {
extend: 'Ext.data.Store',
model: 'testApp.model.User',
proxy: {
type: 'ajax',
url: 'http://jsonstub.com/blogPost',
headers: {
'JsonStub-User-Key': '[redacted]',
'JsonStub-Project-Key': '[redacted]'
},
afterRequest: function(req, res) {
console.log("Ahoy!", req.operation.response);
}
},
});


When my application runs I get a:



Failed to load resource: the server responded with a status of 404 (Not Found) http://jsonstub.com/blogPost?_dc=1392922205820&page=1&start=0&limit=25


I thought it was my authentication, but if I enter the wrong header values I get a 403 error instead of the 404 error.

scottmartin
20 Feb 2014, 2:41 PM
If you enter the url into the browser, what do you see? Should get a valid response.

Or do you need the headers keys?

mitts2010
20 Feb 2014, 2:59 PM
I need the header keys.

When I use a jQuery script to GET and print the response to the console I get my response back just the way I expect it. In fact using curl, angular, and any web http request service I get the object back fine. Just extJS I can't do it.

scottmartin
20 Feb 2014, 3:16 PM
Can you verify the header/payload on the working version vs Ext?

My guess it does not like your url params and it is denied the call?

mitts2010
20 Feb 2014, 3:34 PM
I don't know how exactly to do that, but this is the working code for jQuery:


$.ajax({ type: 'GET',
url: 'http://jsonstub.com/blogPost',
beforeSend: function (request) {
request.setRequestHeader('JsonStub-User-Key', 'c475ddb9-7207-4dd4-8e22-23a828f1d4b3');
request.setRequestHeader('JsonStub-Project-Key', 'ab319e35-e04e-4d9e-989c-71d51977923c');
}
}).done(function (data) {
console.log(data);
});

When I got extJS to print the request in the console it had the proper header fields set when I checked the console.

skirtle
20 Feb 2014, 8:42 PM
If you open the Chrome developer tools and find the request in the Network tab you should see an option to 'Copy as cURL' in the context-menu. You can then compare the request sent by ExtJS to the one you're sending manually using cURL. Then adjust it (using cURL) until it works. Once you know exactly what the problem is we can have a much better stab at fixing it.

As Scott already suggested, my guess would be it's the extra parameters ExtJS is adding. If you null out the pageParam, etc. they won't be included.

mitts2010
21 Feb 2014, 9:17 AM
Here is the CURL for the request that does not work that extJS is sending:


curl "http://jsonstub.com/blogPost?_dc=1393002643028&page=1&start=0&limit=25" -H "Origin: http://localhost" -H "Accept-Encoding: gzip,deflate,sdch" -H "Accept-Language: en-US,en;q=0.8" -H "User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.117 Safari/537.36" -H "JsonStub-Project-Key: ab319e35-e04e-4d9e-989c-71d51977923c" -H "Accept: */*" -H "Cache-Control: max-age=0" -H "Referer: http://localhost/extjs/" -H "Connection: keep-alive" -H "JsonStub-User-Key: c475ddb9-7207-4dd4-8e22-23a828f1d4b3" --compressed

Here is the working CURL:


$ curl http://jsonstub.com/blogPost -H "JsonStub-User-Key: c475ddb9-7207-4dd4-8e22-23a828f1d4b3" -H "JsonStub-Project-Key: ab319e35-e04e-4d9e-989c-71d51977923c"

This is the request header, I don't know if its relevant but it looks useful:


GET /blogPost?_dc=1393002643028&page=1&start=0&limit=25 HTTP/1.1Host: jsonstub.com
Connection: keep-alive
Cache-Control: max-age=0
Origin: http://localhost
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.117 Safari/537.36
JsonStub-Project-Key: ab319e35-e04e-4d9e-989c-71d51977923c
JsonStub-User-Key: c475ddb9-7207-4dd4-8e22-23a828f1d4b3
Accept: */*
Referer: http://localhost/extjs/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8




Here is the response header:


HTTP/1.1 404 Not Found
Date: Fri, 21 Feb 2014 17:10:43 GMT
Server: Apache
Cache-Control: no-cache
JsonStub-RateLimit-Limit: 500
JsonStub-RateLimit-Remaining: 496
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,JsonStub-Project-Key,JsonStub-User-Key
Access-Control-Allow-Credentials: true
X-Frame-Options: SAMEORIGIN
Set-Cookie: jsonstub_session=eyJpdiI6IklnTFhzWFFCN2RRQlp5NmNQWnE1Rm43Y1hWZkVRbXI2amx1QzY1enBPb0k9IiwidmFsdWUiOiJJbDVkY2YrYjlsaDJXMUsrM3g1THdxRG9vSzdNV1VBY2lVcnkyK0x4R3RJVXptYmROMFdIc2d1YUNLbE1aQlJSYnR5TXRKc2ZReWhLUTdBQjNMaFwva3c9PSIsIm1hYyI6ImEyZDkwOTRjY2NkZGU4MDQ3YWRlN2ViODk0ZGFlNGE4ODg0MWYwYmI4YjRjMWE0MGQwYzE2ZGFjNGNiMzJiNmYifQ%3D%3D; expires=Fri, 21-Feb-2014 19:10:43 GMT; Max-Age=7200; path=/; httponly
Vary: Accept-Encoding
Content-Encoding: gzip
Connection: close
Transfer-Encoding: chunked
Content-Type: application/json

skirtle
23 Feb 2014, 11:57 PM
Just remove the URL parameters and it'll work fine. The settings you need are noCache, limitParam, startParam and pageParam.

mitts2010
25 Feb 2014, 2:16 PM
Just remove the URL parameters and it'll work fine. The settings you need are noCache, limitParam, startParam and pageParam.

Thank You! This worked.