jQuery getJSON error: Refused to execute script l because its MIME type ('image/jpeg') is not executable - executable

I am trying to get my IP camera image on my web application using getJSON:
myurl = ipcameraurl/jpeg.cgi?jsoncallback=?;
$.getJSON(myurl, {tagmode: "any", format: "json", cache: "false", datatype: "jsonp"}).done( function{}). fail( function{});
I tried it on http://api.flickr.com/services/feeds/photos_public.gne and it works.
But with my IP camera I am getting the error above.
I tried to set contentType: "application/javascript" or "application/json" but this did not fix the problem.
How to fix this issue?

Either change the contentType on the $.getJSON to the correct type or the target url service.
http://api.flickr.com/services/feeds/photos_public.gne is XML
add ?format=json in the end to get json.

Related

CORS blocking requests in Kotlin lambda but not in identically setup Node lambda

I have a lambda, written in Kotlin with Serverless and CORS just is not working. I feel like I've tried everything. I deployed a Node Lambda with identical sls.sh command and yaml files. The function looks like this
hello:
handler: handler.hello
events:
- http:
path: hello
method: post
cors: true
My responses look like this in both Node and Kotlin:
{
"statusCode": 200,
"headers": {
"Access-Control-Allow-Origin": "*"
},
"body": "{\"id\": \"f9f76590-xxxx-xxxx-xxxx-9c8e99238f40\"}"
}
In the Node case this all works great. I make a fetch call like this and it works (omitted the Promise resolutions for brevity):
var makeRequest = function (data) {
fetch('https://{lambda URL}/hello', {
'headers': {
'content-type': 'application/json'
},
'body': JSON.stringify({ data }),
'method': 'POST'
})
}
In the Kotlin case I get this CORS error back
Access to fetch at 'https://{lambda URL}/hello' from origin
'http://127.0.0.1:8080' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource. If an opaque response serves your needs, set the request's
mode to 'no-cors' to fetch the resource with CORS disabled.
I try to "enable CORS" in the API Gateway panel but I get that it's already enabled:
And hit submit I get the error (invalid response status code)
When I hover over the error icon it says "Invalid Response status code specified".
Under Gateway Responses, under every sub item (Default 4XX, Default 5XXX, etc) there are response headers set. This is the same across my Node and Kotlin lambdas.
I'm completely out of ideas at this point.
The only potentially odd thing is I am noticing that in my Node request I see access-control-allow-origin: * in response headers in the browser network panel but in the Kotlin one I don't see it.
From this:
I can see that you haven't created Integration Response in your post method.
Try these configurations:
I discovered my CORS issue was because of server errors. If your server has an error and the API Gateway can't get a response then you get a CORS error because the Gateway itself doesn't have the CORS headers.
While the fix is easy (just handle that server error) it was hard to uncover. I wish this was documented better somewhere so hopefully this is found for others :)
For my case specifically, and why it didn't show up in Node but showed up in Kotlin, was because of types. the browser was sending a type Node automatically corrected the type (number to string) but Kotlin was expecting the type and threw a type error.

Crossdomain jQuery ajax request was not called and give error status "parsererror"

I am trying to call cross domain url. which has response text as below.and it is valid json response.
[{"LANG_CODE":"UK_EN","COU_ISO_CODE":"BGR"},
{"LANG_CODE":"UK_EN","COU_ISO_CODE":"HUN"},
{"LANG_CODE":"UK_EN","COU_ISO_CODE":"PRT"},
{"LANG_CODE":"UK_EN","COU_ISO_CODE":"UGA"}]
Jquery ajax code which i am using for calling cross.
$.ajax({
url: "http://someDomainName/restfulservice/Api/Countries/Get_Json",
dataType: 'jsonp',
crossDomain: true,
async: false,
success: function (data) {
alert("success >> "+data);
},
error: function (jqXHR, textStatus, errorThrown) {
alert("error : "+errorThrown + ", textStatus >> "+textStatus);
}
});
every time it goes to error block. when i inspect this service in browser then it gives response text with valid json string.but through code i am getting error "jQuery18305917718204907095_1409810925309 was not called, status: parsererror".
while this code is working for the url "http://api.geonames.org/findNearbyPlaceNameJSON?lat=47.3&lng=9&username=demo".
what could be the issue for same ?
It is sending back JSON but you have said dataType: 'jsonp'. JSON is not JSONP.
Either change the service to support JSONP or change the client to expect JSON (which might require you to find some other way to circumvent the same origin policy)

Callback not getting called on Internet Explorer for Ajax JSONP call

I'm making an Ajax call using JSONP to fetch JSON data from a third-party (domain different from my site) and its working on Chrome and Firefox but failing on IE (9 & 10 are the versions I have tried). In the IE debugger I see the call is completing (with Http 200) but the callback I've specified for the JSONP call is not being invoked.
My code looks like this:
$.ajax({
url: 'http://api.yipit.com/v1/deals/?key=mykey&division=seattle&limit=1000',
dataType: 'jsonp',
contentType: "text/javascript",
async: false,
cache: false,
crossDomain: true,
jsonp: 'callback',
jsonpCallback: 'processResult',
error: function (xhr, textStatus, error) {
window.alert(error);
},
success: function (data) {
window.alert(JSON.stringify(data));
_yipit_deals = data.response.deals;
}
});
And the response body looks like this:
<html><body><pre>processResult({
... [valid JSON data]
});</pre></body></html>
When the call is made, the error function is getting invoked with error as: Error: processResult was not called and the IE debugger shows a script error caused when trying to parse the <html><body><pre> tags in the response. When running on Chrome and Firefox these html tags don't exist in the response body and I'm not sure why the response is different in the case of IE.
It appears that these tags are causing IE to barf and not be able to invoke the callback. I've tried specifying other values for contentType such as "text/html", "text", "application/javascript" and even not specifying it at all, but its not made any difference. I'm using JSONP to get around the cross-domain issue.
Any ideas? Thanks!
You have to pass an explicit format argument to the URL:
&format=json
Otherwise, it's just pretty-printing the output:
<html><body><pre>{
"meta": {
"code": 401,
"message": "Key not recognized",
"name": "AuthenticationFailed"
},
"response": {}
}</pre></body></html>
Also, I would set async back to true.

jQuery .ajax call returning error when accessing Java Spring service via domain name based URL

My application's HTML5, jQuery Mobile frontend talks to Java server (Spring, Hibernate, MySQL). The application works fine on my notebook as well as in QA environment. On QA, I'm accessing the application using the server's IP address.
When I host the application in Live environment (the same server as QA but a different web app in Tomcat) and try to access it using URL with the domain name, $.ajax calls in the application return error.
One of the calls is as follows:
$.ajax({
type : "GET",
url : "http://www.smartcloudlearning.mobi:9080/SmartCloudLearningMobi/rest/resource/getResourceTypes",
cache : false,
async : false,
dataType : 'json',
success : function(rTypes) {
Alert("success!");
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert("An error has occurred making the request: " + errorThrown);
}
});
I get the following error in Firefox:
An error has occurred making the request: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE)" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://www.smartcloudlearning.mobi/js/jquery-1.7.1.min.js :: <TOP_LEVEL> :: line 4" data: no]
I get the following error in Chrome:
An error has occurred making the request: Error: NETWORK_ERR: XMLHttpRequest: Exception 101
In the server log, I see that the requested Spring service was successfully invoked but it looks like the client doesn't receive the data!
If I hit the URL
http://www.smartcloudlearning.mobi:9080/SmartCloudLearningMobi/rest/resource/getResourceTypes
directly in the browser, I get expected results! I sense that this is somehow due to how I forward server request from Apache to Tomcat.
The following are the lines in Apache / httpd server's httpd.conf file:
ProxyPass /SmartCloudLearningMobi http://www.smartcloudlearning.mobi:9080/SmartCloudLearningMobi
ProxyPassReverse /SmartCloudLearningMobi http://www.smartcloudlearning.mobi:9080/SmartCloudLearningMobi
Can anyone tell me what's amiss here? Much appreciated!
I managed to solve the problem:
The browser was giving the error on .ajax call because I had port number in my URL. The port number got carried over when I created 'live' URL from my QA URL. When I removed the port number from the .ajax call's URL, the call started returning success!
Jason Foglia, your statement "... and also the port..." nudged me to explore that angle... thanks a lot!
You're probably getting an error because of a security concept called "same origin policy" which doesn't allow you to call a service from a different domain. Or at least, disallow you from calling a method in that service.
Same discussion is found here - AJAX Cross Domain
You can however implement a cross-domain using JSONP - Wikipedia on JSONP
The solution is to change the datatype to JSONP:
$.ajax({
url:"http://www.smartcloudlearning.mobi:9080/SmartCloudLearningMobi...",
dataType: 'jsonp',
...
});
Try using an relative url:
If that doesn't work is the domain name the same as the url and also the port.
Browsers don't allow cross domains.
$.ajax({
type : "GET",
url : "/SmartCloudLearningMobi/rest/resource/getResourceTypes",
cache : false,
async : false,
contentType : "application/json"
dataType : 'json',
success : function(rTypes) {
Alert("success!);
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert("An error has occurred making the request: " + errorThrown);
}
});
The browser was giving the error on .ajax call because I had port number in my URL. The port number got carried over when I created 'live' URL from my QA URL. When I removed the port number from the .ajax call's URL, the call started returning success!
Jason Foglia, your statement "... and also the port..." nudged me to explore that angle... thanks a lot!

Adding a social tag to a page

In SharePoint when you click on the "I Like It" icon, it sends json to this URL
"_vti_bin/socialdatainternalservice.json/AddQuickTag"
So I wrote a custom script which sends JSON data
$("a").click(function(){
$.ajax({
type: "POST",
url: "/_vti_bin/socialdatainternalservice.json/AddQuickTag",
data: '{"targetPage":"http://url/calendar.aspx","title":"Documents - All Documents","quickTagId":0}',
contentType: "application/json",
success: function(msg){
alert(msg);
}
});
return false;
});
I get an error which simply says "There was an error processing the request." and the error in the log file says "Request format is unrecognized for URL unexpectedly ending in '/AddQuickTag'."
Is it possible to write a custom script which will post JSON data to this URL and have SharePoint tag a page?
These are the calls that are made for the I Like it functionality
/vti_bin/socialdatainternalservice.json/GetNormalizedPageUrl
Post
{"pageUrl":"http://<web app name>/SitePages/Home.aspx"}
Returned
{"d":"http://<web app name>/"}
/vti_bin/socialdatainternalservice.json/AddQuickTag
Post
{"targetPage":"http://<web app name>/","title":"Home - Home","quickTagId":0}
Returned
{"d":null}
I think you need to do the GetNormalized call first.