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.
Related
I can succesfully use a HTTP GET to retrieve an image via services like Postman and Hurl.it.
I'm now trying to obtain the same image via Angular HttpClient as blob. Code is basically as is:
this.http.get('via.placeholder.com/200x200',{ responseType: 'blob'}).subscribe(data => this.d = data);
Whether I use map and subscribe, I can't retrieve the image data. I always get the same CORS error in Chrome:
Failed to load via.placeholder.com/200x200: Response to preflight request
doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 405
Now I know the "why is this working with Postman but not in my code" has been answered here.
That said, is there still a way, using javascript/angular and without using a proxy, to simply get an image from a website via HTTP GET?
Created a MEAN stack app and I have an angular component that on page load is making a request to the Amazon Product API. I am running and testing locally on localhost (node/express backend).
Here is the basic request code in my component:
getAmazonTackle(amz:amazonservice) {
var req:Object = {
method: this.amazonservice.Method,
url: this.amazonservice.Endpoint,
headers: {
//"Access-Control-Allow-Origin":"*"
},
data: this.amazonservice.Data,
withCredentials: false
}
console.log(JSON.parse(JSON.stringify(req)));
this.$http(req).then(
function(response) {
console.dir('The response: '+response);
},
function(response) {
console.dir(response);
console.dir('The error:'+response);
}
)
}
When I don't have the Access-Control-Allow-Origin header, accessing the page in browser I'm presented with the following in the Chrome dev console:
XMLHttpRequest cannot load http://webservices.amazon.com/onca/xml?.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:3000' is therefore not allowed access.
When I add the Access-Control-Allow-Origin header, I receive the following:
Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:3000' is therefore not allowed access.
What I'm trying to determine is if I'm doing this incorrectly or if the amazon API doesn't support CORS.
I faced the similar issue and found that if I create cors enabled http handler that will work as middleware between your server and amazon server. This way we can solve this cors issue.
It is quite simple to create and I already written it.
Develop Angular2 Application with real server APIs
Check out the question and the answer in the above post.
Similar code I posted on github, if need I will share the location.
Note: As of now I handled the get request but adding other methods is fairly easy.
https://github.com/Anil8753/CORSHttpHandler
I'm simply trying to make a get request using food2fork's search api in an angular app. Right now I've got no backend to the app, so everything is running client side, and I'm running the following (with the APIKEY replaced, of course):
$http.jsonp('http://food2fork.com/api/search?q=turkey&key=APIKEY&callback=jsonp_callback')
.then(function(response) {
console.log(response);
});
However, I'm Uncaught SyntaxError: Unexpected token : in the console. I assume this is because it's expecting a jsonp function rather than json.
If I run it as a jquery getJSON, as seen here:
$(document).ready(function() {
var url = "http://food2fork.com/api/search?q=turkey&key=APIKEY";
$.getJSON(url,function(data) {
})
});
I get No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8080' is therefore not allowed access. - which may be because I'm running locally, but that hasn't been a problem in the past.
I just want to get the json that I get if I run the same request as a url in a browser. Any ideas?
No 'Access-Control-Allow-Origin' header is present on the requested resource
You are facing Cross Domain problem and what you should do is enabling CORS from your server side (the service running from localhost:8080)
Getting this error when trying to get stuff from the Twitter API using simple-twitter:
XMLHttpRequest cannot load https://api.twitter.com/1.1/statuses/user_timeline.json. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 400
I'm basically doing exactly what it says in the react docs, but with the relevant line replaced:
componentDidMount: function() {
twitter.get('statuses/user_timeline', function(error, data) {
if(this.isMounted()){
this.setState({tweets: data})
console.dir('callback')
}
}.bind(this));
}
The callback function seems to never fire, which I assume is due to the request not completing.
What am I missing here?
The issue here is the module you're using is written for Node, not the browser.
Whilst in the browser, you can't make requests outside of your origin (in this case localhost:3000) unless the requested resource is served with the appropriate Access-Control-Allow-Origin header.
In this case the browser makes a preflight (OPTIONS) request to the same resource to see whether the CORS checks pass and it can safely respond. In this case it can't because Twitter's API doesn't allow your origin.
You can avoid these limitations if the API supports JSONP, but as of V1.1 of the Twitter API, only OAuth is supported.
This means that to access the Twitter API from the client, you'll need to authenticate inside your session, in order to generate an OAuth token that you can use to make requests. Take a look at the codebird-js library.
Alternatively, you can use the simple-twitter module from a server and forward requests from your browser on to the Twitter API.
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