We Keep Coding

Getting JSON from a website with no visible files using p5.js

I am trying to import a json file from a website using p5.js, and i thought it would be quite easy, however when i tried it i realized the json was actually just in plain text on the page (It is the only thing on the page). I checked chrome web tools to look at index.html, but i was greeted by "(index)", is it a problem with google or am i just going to have to use something else than this?
function preload() {
httpGet('leaderboard.popcat.click', 'json', function(response) {
});
}
//there are the setup and draw functions aswell
I got an error when i ran the code aswell, it was
Error: JSONP request to url failed
here is a picture of the page btw, (the url is leaderboard.popcat.click)
EDIT: The main problem i am having is that there is no file in https://leaderboard.popcat.click/, not the getting of json.
The network tab says no such url exists, and i believe that is because of the fact that i didn't specify a file.
Here is the console output aswell

I solved my issue by starting chrome in no-cors mode or whatever it's called AND using the full path of the website. I got it into no-cors mode by making a shortcut with this link
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=~/chromeTemp"
and running it as an administrator

403 error when accessing an external image URL on an internal website

I've been working on this internal web app that allows the users to click on a button to see an image. Pretty straight forward.
<img id="swatchimage" width="600" height="600" src="" />
The image needs to be linked from an external website. The piece of javascript that does that is:
$("#swatchimage").attr("src", fileURL);
One of the URLs look like this:
If you try to access the image above in a browser it works without a problem.
When accessing it from the internal app ( IP: 192.168.110.15 ) then the server returns 403 error.
The same files are used in the main website, so I don't think it's about the hot linking protection (which i tried to disable too, to no avail).
Is there some restriction that I'm not aware of when linking these kind of resources?

I think I found the problem:
The server (cdn.palmcentre.co.uk) is not sending an Access-Control-Allow-Origin header in the response, so you can't use JavaScript to fetch it.
However, this is not a 403. Here's a screenshot of the error I get:
Also, what you're trying to do is not to fetch the image, but modify the src attribute of an <image> element, which should be allowed.
This makes me think that the error you're getting is because jQuery is trying to fetch the image, and failing, but I'm not sure.
Try doing this instead:
document.getElementById("#swatchimage").src = fileURL;

It seems I have found the solution.
It was puzzling indeed, because i knew that CORS would not be at play here. It was just another image URL that was requested from an HTML tag. So it shouldn't have behaved in such way.
Notwithstanding the help received, for which I am grateful, it seems that the issue was in fact a hot linking protection that was in place.
But it was not from the server itself or from the script but rather from the CloudFlare cache itself.

jQuery.get() returns errors [duplicate]

This question already has an answer here:
Console shows error about Content Security policy and lots of failed GET requests
(1 answer)
Closed 8 years ago.
I use $.get function to get some html from exetrnal website in my chrome extension:
$.get(url, function(data) {
var someImgs= $(data).find('img[width="90"]').parent();
});
But I see such errors in my console:
chrome-extension://nqzxdldmasxchnkgibeedilpknlbndiho/files/image.png
I don't use any images in my extension, and I know this is link to image on exetrnal website.
What I tried:
wrap $.get() function into try-catch
handle error using $.ajaxError()
replace relevant links /files/image.png to full path: http://website/files/image.png using data.replace()
run example code in jsFiddle: errors are the same but despite of that code continiues running.
No ideas now. What I do wrong?
UPD: Error doesn't occur when I don't touch to data. When inside $.get I simple type console.log(data) there are no errors
UPD2: I also tried to download all the images whcih are mentioned in error messages and put them in the same path in my extension as on external website
UPD3: As it was mentioned in comments, images from remote website are reffering to relative paths. So I tried to replace relative paths in 'src' attribute to full, using this code:
var data = data.replace('/sites/default/', 'http://website/sites/default/');
As you guess - result is the same, same errors.
UPD4: Seems like replacement wasn't successful. I checked the above replacement and it says nothing changed:
console.log(data.indexOf('src="/sites/default/')); //returns integer
So, actually it was solved by downloading remote images to my extension foled. Little 'nasty' way but the only workable. Thanks to all the commentators that helped me to find out the source of problem.

Edit: On second look it appears that the html of the page at url contains images with relative file paths (like /files/menu_banners/ktc_apple.png), but when you interpret it and treat it with jQuery as a DOM object, it fails to load them because their urls are now interpreted as relative to the extension (cross-origin restrictions still apply, but that's not the issue since you've edited the manifest)
--
You are trying to make a cross-origin request, but jQuery isn't aware of a correct API to use when included in an extension and that is why it's failing. You can read more about XHR in Google Chrome extensions; you basically need to allow cross-domain access to your website URL:
By adding hosts or host match patterns (or both) to the permissions
section of the manifest file, the extension can request access to
remote servers outside of its origin:
//manifest.json
{
"name": "My extension",
...
"permissions": [
"http://www.google.com/"
],
...
}
So in your manifest you should include your http://website url, or use a wildcard http://*/ and allow access to any domain (handy in dev, terrible idea security-wise in production)

Reading code from GitHub as text (raw) in a web page

I'm trying to read some source code (C language) from my GitHub repository to be shown as text in my webpage. I can access the code in raw mode through https://raw.github.com.
I'm using jQuery GET function to read the data but it doesn't work. Problem is related with XMLHttpRequest and Access-Control-Allow-Origin but, despite I found some related question on stackoverflow (XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin) it didn't work for me. I tried everything.
My jQuery code:
<script type="text/javascript">
$(document).ready(function() {
var url = 'https://raw.github.com/raysan5/raylib/master/examples/ex01_basic_window.c';
$.get(url, function(data) {
$('#code').text(data);
}, 'text');
});
</script>
Please, could someone help me with this issue? Many thanks!

You could try and delete the dot between raw and github:
https://rawgithub.com/raysan5/raylib/master/examples/ex01_basic_window.c
See rawgithub.com, also explained in this blog post:
GitHub discourages this, since they want repo owners to use Github Pages to host specific versions of their files. They discourage it by serving files from the “raw” domain with Content-Type: text/plain instead of Content-type:application/javascript.
This wasn’t a problem until recently, when Google Chrome implemented a security fix that prevents JavaScript from being executed if it has an incorrect Content-type.
This makes sense when you’re viewing pages outside of your control. But when it’s you who’s deciding what scripts to include, it’s a hassle.
As Rob W comments below:
It's worth mentioning that the only reason that this web service solves the OP's problem is that it includes the Access-Control-Allow-Origin: * response header.

Access Control Allow Origin error

I am writing my first WebAPI service, to be called from a pure HTML/javascript application. I am starting visual studio first, then running my app in Safari ( it refuses to run in Chrome, and gives this exact error no matter what I do, but has been fine in Safari until now ).
Based on my other SO reading on this, I've added a header that is Access-Control-Allow-Origin with a value of *.
When I push the button in my web app, it makes an AJAX call and I can step through the debugger to see that it's calling my service fine. When it returns, it always returns an object, and the error in Safari in the console is "XMLHttpRequest cannot load (myurl). Origin file :// is not allowed by Access-Control-Allow-Origin".
Any suggestions for how to get Safari to accept the return value would be greatly appreciated. As I said, it's returning a class, which I expected WebAPI would turn in to a JSON string to return to the browser. I don't know if I'm doing something wrong here, or if something is wrong in Safari. I should mention, although I think it's obvious, I am using MVC4, ergo I am using Safari on Windows, not Mac.
Thanks

How are you currently adding the header? The problem isn't getting safari to accept the return value, your WebAPI is rejecting the request.
Here's an article on how to implement CORS in Web API v1 (MVC4). http://goo.gl/BZkrlf
If you can use MVC5/WebAPI v2, there is an easier way to enable CORS via a NuGet package (see this how-to http://goo.gl/60YkgX)

This is an issue with protocol mismatch. You cannot send a cross domain request to HTTP protocol if the request is originating from the FILE protocol. Try viewing the page using a local webserver so you can preview the page in the browser using HTTP. I have experienced this same issue - it is browser side and not a problem with your service.

You can use Microsoft.AspNet.Cors from nuget and adding
var attr = new EnableCorsAttribute("", "", "GET");
config.EnableCors(attr);
to WebApiConfig.cs