I am trying to display content from json online on my HTML. It works fine on my laptop but on my phone browser (chrome) and my friends (opera) it doesn't work. I've checked the compatibility with it and it should be fine?
Heres my HTML that I'm using:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="15" >
<title>Alton Towers Predicted Queue Times</title>
</head>
<body>
<script>
fetch("https://queue-times.com/parks/1/queue_times.json")
.then(response => response.json())
.then(data => {document.querySelector("#name").innerText = data.lands[0].rides[0].name});
</script>
<h3><span id="name"></span></h3>
</body>
</html>
Any idea why this works on my laptop but not my phone?
Apparently the problem is a CORS issue. Since this is a third-party site that you do not have access to, you will need to implement a small server-side code that will receive a request, send its equivalent to the actual target, receive the target's response and send that back to the browser. For your small server-side code, that will act as a proxy you can easily set the appropriate CORS headers so you will be able to perform the requests.
Related
I am enabling CORS with Spring security in My project but after implementing what is best way test it ? Because for IE 9+ versions i am not able test it properly so couldn't get confirmation my code is working or not. I developed one Javascript client and hitting ajax request but still it is not working as expected and without proper testing not able to figure out there is issue with Spring Security or test method. I also try https://www.test-cors.org/ but not working for me.
Anyone know this please share.
Thanks in advance.
I go the answer the best way to test CORS implementation is hitting API with separate JavaScript client which may be not in your project. That is the best way to test it. However modern browsers like Chrome and Firefox by default block the CORS requests so proper error will print on the browser's console. Browser's like IE will not block such request by default so make sure your server should enabled CORS requests.
I used below JavaScript code for testing.
<!DOCTYPE html>
<html>
<head>
<title>Hello CORS</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$.ajax({
url: "
Your URL"
}).then(function(data, status, jqxhr) {
});
</script>
</head>
<body>
</body>
</html>
Make sure about Jquery versions you are using which may give problem while testing in IE.
Use latest Jquery version.
After upgrading my browser to Chrome 66 I'm having problems creating any API requests to a server which initially requires NTLM authentication. I am wondering if anyone has any explanation as to why. I presume it's something to do with the added ad blocking technology or security added to Chrome, or maybe it's a Chrome bug.
I've created an basic example below using Fetch. What happens is the user visits the site, Chrome redirects users to the API to authenticate (instead of remaining on the same site, like with previous versions of Chrome), when the user authenticates the page goes blank and Chrome seems to disable the keyboard (I can't press cmd + w to close the tab). When I refresh this page the API response starts showing in the browser. After the user has authenticated, they can go back to the initial page that is creating the API request and it works fine.
Does something need to be added to the headers to make this work?
Please don't just suggest using an alternative authentication method as a solution.
<html>
<head>
<script type="text/javascript">
fetch('https://fakeapiurl.com/api', {
credentials: 'include'
})
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
</script>
</head>
<body>
</body>
</html>
This has been reported as a bug in Chrome 66, as you suspected. I linked to your post and added my own comments there as well.
https://bugs.chromium.org/p/chromium/issues/detail?id=843861
I have a page with iframe, to simplify this case lets assume that it looks like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<iframe src="http://example.com"></iframe>
</body>
</html>
Assume that the page is on the Internet and you enter it. It loads http://example.com inside the iframe.
I want to change this so that you couldn't see the http://example.com because you can open this adress only using my page not just putting http://example.com in second tab of webbrowser.
I see http://example.com in page source (right click -> page source)
I also see in the network in developer tools that the browser makes request to http://example.com. So I just can copy this address and open it in new webbrowser tab.
What should I do to make it impossible for you to know the address: http://example.com
The only way I can think of is if you screen scrape the page in your code and serve up the html yourself. So it would look like this:
Someone makes a request to your page
Before you serve the page in your back end code you grab the html on
example.com
Serve up the html that comes out of the back end request
This may not be formatted properly though because you are missing css or lose functionality because you are missing js but you just need to make sure you include that stuff.
An IFrame is client-side.
This means for the browser to render the IFrame, it must be visible to the client web-browser.
The only way to hide it is for you to develop a web proxy.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<iframe src="grab_secret_site.php"></iframe>
</body>
</html>
Here, the code within grab_secret_site.php would make an HTTP request to http://example.com to grab the HTML. An example here. However, bear in mind that any resources won't load unless you rewrite them.
e.g.
<img src=icon.jpg />
Will point to icon.jpg on your site, not on example.com.
If you don't want the page to be loaded without the parent frame, you could create a session variable (e.g. PHP session) in the outer page, which is then checked within the IFrame. If it doesn't exist, redirect the user back to the outer page.
There is a header - X-Frame-Options that allows you to block opening page in iframe, but in this way I think It's impossible.
I am getting this error on a website I'm working on, I have simplified the code down to the below example, which produces this error in webkit (chrome 15.0.x), I don't see the error in firefox.
I have looked around at other SO posts regarding the same error and most of them are in reference to using the youtube API and cross domain references.
I have tried:
changing the doctype, (no difference)
adding origin params to the youtube call (no difference)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title></title>
</head>
<body class="page front logged-in no-sidebars">
<iframe width="393" height="230" src="http://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" ></iframe>
</body>
</html>
This is a common issue with cross-site messaging (where one page/website communicates with another page/website via an IFrame using javascript callbacks as a medium). It doesn't always work out and some browsers may not always catch the callback event and may register it as a security error if the protocol or port differs.
I want to use JavaScript to make a simple http get.
I used jQuery to perform my request. My code runs on IE8.0 but not in Chrome (ver 6.0).
My page has the following code: (to simplify, i made a simple request to a html page, but my needs is other)
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html>
<script type"text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<SCRIPT TYPE="text/javascript" >
function sendGet(){
$.get(
"http://www.google.pt",
function(data) {
alert('page content: ' + data);
});
}
</SCRIPT>
<head>
<title> Http Get Demonstration </title>
</head>
<body>
<p/>
<input type="button" value="Http Get" onclick="sendGet();" />
</body>
</html>
As i said, when i load this page on IE and press the button, i get the alert with the html code. But in Chrome the alert appears with empty text (null?). In Chrome Console from "Developer tools" i get the message: "XMLHttpRequest cannot load http://www.google.pt/. Origin null is not allowed by Access-Control-Allow-Origin."
Anyone can explain me what's the meaning of this message? And what i should change to my page run in Chrome?
Thanks
Due to same origin policy you cannot send AJAX requests to different domains than the one hosting your page. So unless your page is hosted on http://google.pt you cannot send an AJAX request to this domain. One possible workaround is to setup a server side script on your domain which will act as bridge between google.pt and the client or use JSONP if the distant domain supports it.
Although i can't remember if i changed any IE option, the Darin Dimitrov seems explain my problem.
I found some tricks can be used (beyond the Dimitrov answer):
use a PHP script:
http://jquery-howto.blogspot.com/2009/04/cross-domain-ajax-querying-with-jquery.html
configure IE by editing regedit (not recomended):
http://msdn.microsoft.com/en-us/library/dd565656(VS.85).aspx
(I belive there's some other way to disable cross domain protection without editing regedit. But i couldn't find it)
Are you opening the html file directly from a file (e.g. does the address bar say file://usr/path/to/the/file)?
We've found chrome won't let you 'ajax' in files from other domains when running under file://. However, in Safari it works fine.
Best solution for us is to use something like MAMP to run a local Apache server.