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
Related
This question already has answers here:
No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API
(26 answers)
Closed 2 years ago.
Server URL
http://3.17.60.171
Ajax call in client side
<script>
"use strict";
$(document).ready( function() {
$.ajax({
url: 'http://3.17.60.171/',
success: function(data){
console.log(data);
},
error: function(error){
console.log(error.name +": " +error.message);
}
});
});
</script>
Is there any possibility to get the data without making any changes in the server side?
The server side coding is written in python. I am unable to find the server source code.
I am getting this error eventually
Access to XMLHttpRequest at 'http://3.17.60.171/' from origin 'file://' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
3.17.60.171/:1 Failed to load resource: net::ERR_FAILED
The only successfully solution I've found to this is a proxy server. CORS is a browser security policy, so servers aren't mandated to follow it. So you could do
Browser -> CORS Enabled Proxy Server -> CORS Disabled Resource Server
https://cors-anywhere.herokuapp.com/ is an example of a free proxy server, but it is not intended for production use. It should be fine for personal projects though.
I'm writing an angular 2 app which uses a module called github-trend. I have a service which calls some functions from the module
scraper.scrapeTrendingRepos("").then(function(repos) {
repos.forEach(function(repo) {
//more code here
});
}).catch(function(err) {
console.log(err.message);
});
For now I'm testing my angular app with Chrome(56.0.2924.87) on http://localhost:3000/ and its giving me an Access-Control-Allow-Origin, here is full message:
Fetch API cannot load https://github.com/trending. No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:3000' is therefore not allowed
access. If an opaque response serves your needs, set the request's
mode to 'no-cors' to fetch the resource with CORS disabled.
data.service.ts:43 Failed to fetch
I've searched around and know that this might be happening because get request and server are working on differnt ports? Looking at the repo, the github-trend module using requestjs to make http requests but I'm not sure how to fix this. Is there a way I can make it work on chrome? What should I modify in the module code so as to make it work?
Solved the problem by using an Allow-Control-Allow-Origin extension for chrome.
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.
I have java application exposing its api as rest services. It is accessible on the following URL: http://localhost:8080
On the other hand I have Angular standalone client trying to call those services. This client is operating on different URL: http://localhost:8383
To avoid CORS issue I have added this to the response header of my rest services:
return Response.ok(result,
MediaType.APPLICATION_JSON).header("Access-Control-Allow-Origin",
"http://localhost:8080").build();
Now it appears no matter what I put as a value of this header:
http://localhost:8080
http://localhost:8383
(* - star)
client doesn't work complaining for the lack of this header:
XMLHttpRequest cannot load http://localhost:8080/PokerGame-REST. No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:8383' is therefore not allowed
access. (16:24:11:684 | error, javascript) at app/index.html
What is the problem here, did I miss something?
It's worth mentioning that Advanced REST client returns the response as expected and the response headers contain this one: Access-Control-Allow-Origin. So it looks like purly my Angular app issue but why?
Another interesting thing is client behavior. When I use:
$http.get('http://localhost:8080/PokerGame-REST/').success(function
(response) { ... }
it fails with the error in question but when I use this:
var restCall = $resource('http://localhost:8080/PokerGame-REST/', {});
restCall.get(function (restResponse) { $scope.intro = restResponse; });
it fails with different error:
Response for preflight is invalid (redirect)
which is not true as the response is purly in JSON format.
Any ideas?
PJDef was right (second comment) and his suggestion helped me to resolve the issue.
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.