getting json from external source in javascript - javascript

Json issues with javascript and jquery.
Trying to load some JSON using javascript.
I have it working using:
See it here: http://jsfiddle.net/5pjha/789/
var url = "http://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=true";
$.getJSON(url, function (json) {
alert(JSON.stringify(json.results));
});
But it dosnt work on the following urls, why is this?
https://poloniex.com/public?command=return24hVolume
https://bittrex.com/api/v1/public/getmarkets
https://api.mintpal.com/v1/market/summary/
Are the following urls not correct JSON ?
Thanks

The google's api set the Access-Control-Allow-Origin header to *, so you could access it by cross domain.
While other urls you provided do not, so you will got an error like below:
XMLHttpRequest cannot load https://api.mintpal.com/v1/market/summary/.
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://fiddle.jshell.net' is therefore not allowed
access.

I believe the issue is down to whether or not the servers you are requesting your JSON from have cross-origin resource sharing (CORS) enabled.
you can see in the headers from the google service that they set Access-Control-Allow-Origin:* This is not the case for teh other URL's you list.
To get around this you will need some form of proxy so that you can request from a server either on the same domain or a server that enables CORS.

For ajax request to any server, You need to define Access-Control-Allow-Origin header for client. which is absent in given. You need to define origin of XMLHttp request in server who can request.
For more info refer this link

Related

Angular 4 No 'Access-Control-Allow-Origin' header is present on the requested resource Bittrex [duplicate]

Json issues with javascript and jquery.
Trying to load some JSON using javascript.
I have it working using:
See it here: http://jsfiddle.net/5pjha/789/
var url = "http://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=true";
$.getJSON(url, function (json) {
alert(JSON.stringify(json.results));
});
But it dosnt work on the following urls, why is this?
https://poloniex.com/public?command=return24hVolume
https://bittrex.com/api/v1/public/getmarkets
https://api.mintpal.com/v1/market/summary/
Are the following urls not correct JSON ?
Thanks
The google's api set the Access-Control-Allow-Origin header to *, so you could access it by cross domain.
While other urls you provided do not, so you will got an error like below:
XMLHttpRequest cannot load https://api.mintpal.com/v1/market/summary/.
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://fiddle.jshell.net' is therefore not allowed
access.
I believe the issue is down to whether or not the servers you are requesting your JSON from have cross-origin resource sharing (CORS) enabled.
you can see in the headers from the google service that they set Access-Control-Allow-Origin:* This is not the case for teh other URL's you list.
To get around this you will need some form of proxy so that you can request from a server either on the same domain or a server that enables CORS.
For ajax request to any server, You need to define Access-Control-Allow-Origin header for client. which is absent in given. You need to define origin of XMLHttp request in server who can request.
For more info refer this link

How to read online html document to string in Angular

I am trying to read online html document and parse some data from it using Angular. The problem is I am keep getting an error about cors. My code for reading html document is:
loadParsingData(htmlToParse:String){
let retVal = this.http.get(htmlToParse.toString())
.map(res => res.text())
return retVal; }
When I try to test this code I expect to get html document from given website (for example imdb most popular movies) as argument, but all I get is:
XMLHttpRequest cannot load
http://www.imdb.com/chart/moviemeter?ref_=nv_mv_mpm_8. No
'Access-Control-Allow-Origin' header is present on the requested
resource.
Can anyone please help me? Thank you in beforehand.
You can send your request through a CORS proxy instead.
Where you’re specifying the URL http://www.imdb.com/chart/moviemeter?ref_=nv_mv_mpm_8 in your code now, just replace that with this URL:
https://cors-anywhere.herokuapp.com/http://www.imdb.com/chart/moviemeter?ref_=nv_mv_mpm_8
That will cause the request to be sent to https://cors-anywhere.herokuapp.com, a proxy that will then send the request on to http://www.imdb.com/chart/moviemeter?ref_=nv_mv_mpm_8. And when that proxy gets the response, it will take it and add the Access-Control-Allow-Origin response header to it and then pass that back to your requesting frontend code as the response.
That response with the Access-Control-Allow-Origin response header is what your browser sees, so the error message the browser is showing you now goes away, and the browser allows your frontend JavaScript code to access the response.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS has general details on CORS, and "No 'Access-Control-Allow-Origin' header is present on the requested resource" is an answer with more details about how you can set up your own CORS proxy.

'Access-Control-Allow-Origin' error when getting data from the API with Axios (React)

I'm getting an a "XMLHttpRequest cannot load https://example.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access."
This is my componenDidMount(), and I'm using axios to get the data from my API.
componentDidMount() {
this.serverRequest = axios.get(this.props.source).then(event =>{
this.setState({
title: event.data[0].name
});
});
}
I'm using "python -m SimpleHTTPServer" on the terminal, to run 'http://localhost:8000'.
I'm using the Chrome browser, and if I turn on the Chrome CORS plugin (to enable cross origin resource sharing), the app works, and I see data displayed from the API on the DOM. But I know that using the CORS plugin is bad, so how should I fix the 'Access-Control-Allow-Origin' error officially?
With Axios, can I somehow add dataType: "jsonp", if that would fix it?
This is a restriction made by the browser for security reasons when you try to access content in some domain from another domain. You overcome this, you need to set the following in your header
Access-Control-Request-Method
Access-Control-Request-Headers
Many sites restrict CORS. The best way to achieve your goal is to make your python server as a proxy. See the example.
//Request from the client/browser
http://localhost:8000/loadsite?q=https%3A%2F%2Fexample.com
//In your server
1. Handle the request
2. Get the query param(url of the website)
3. Fetch it using your python server
4. Return the fetching data to the client.
This should work.

XMLHttpRequest cannot load - Origin 'null' is therefore not allowed access

I am doing a login to connect through a service layer to a Linux server that has sap b1, and I get the following error.
XMLHttpRequest cannot load https://hanab1:50000/b1s/v1/Login. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'null' is therefore not allowed access.
I find from google chrome and despite attempts, always the same error is generated, the funny thing is that when we perform the video https://www.youtube.com/watch?v=ilDH8nhnp4o,I get the error above dimensioned, but when I enter the URL directly the next line https://hanab1:50000/B1S/v1, see I have access to all information.
If anyone can help me in advance I thank you for your collaboration and interest.
In simple words, you cannot. To enable the Access Control, you need to change the way, the server sends you the headers. If your server is a PHP based one:
<?php
header("Access-Control-Allow-Origin: *");
And for SAP (if it uses Apache), the headers should be:
Header set Access-Control-Allow-Origin "*"
You can learn for other servers from here: I want to add CORS support to my server.

No 'Access-Control-Allow-Origin' header is present on the requested resource on AJAX request

I'm using JQuery:
$('#myDiv').load('myApp/url',function(){ });
and it's giving No 'Access-Control-Allow-Origin' header is present on the requested resource By chrome, and firefox so far , any straight forward answer on how to fix this . I don't have control over server to make any configurations and I'm using PHP
This is a CORS issue (Cross Origin Resource Sharing), you are trying to request content via ajax from two different domains. Unless the domain from where you want to grab the data has properly set the CORS headers, browsers will cancel the request right away.
This occurs due to the communication between two different domains. The domain that will server your data, should have some headers set, this headers act as permissions, they tell which domains are allowed to ask for data from it, and which verbs/methods are allowed.
You can read more about this here and here
No, there won't be a straight forward answer to this because it will depend entirely on your system/server setup, and what you have access to. Here's what you need to know.
In the beginning -- AJAX requests had a very strict "same origin" policy. This meant if you made an ajax request FROM a website with the domain example.com, you could only make a request to a URL that was on example.com.
In more recent years browsers have loosened up on this. If the server that you're making a request to has an Access-Control-Allow-Origin header, and that header includes the URL/domain of the server you're making the request from, then the request will be allowed. Similar question/answer here.
So, how you set this header depends on the server you're making a request to. If you have control over this server, start your Googling there.
If you don't have control over this server, you need to make a request to php page on your server, and this PHP page should make a curl request to the server that had the information you don't. A curl request, happening outside the browser, isn't subject to the same cross domain issues.
The easy way is to do this by hand:
var script = document.createElement('script');
script.src = uri;
script.id = 'scriptid';
document.head.appendChild(script);
It may be some browser compatibility issues, but you get the power of CORS with no 'Access-Control-Allow-Origin' error

Categories

Resources