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.
Related
I have this block of code that I'm testing to see if it'll send a tweet if it's button is clicked.
const onTweet = () => {
client.post('statuses/update', {status: 'Testing'})
.then(function (tweet) {
console.log(tweet);
})
.catch(function (error) {
console.log(error + " error")
});
}
However, every time I click on the button I get this exact error
Access to fetch at 'https://api.twitter.com/1.1/statuses/update.json' from origin 'http://localhost:1234' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
I've tried to research online to see how to fix it or work around it, but I don't think the solution I've found apply to my problem. For example, this post Access to fetch at from origin 'http://localhost:3000' has been blocked by CORS policy, says to set the mode to no cors but I don't think that applies to my problem since I'm not using CORS to post this tweet. This is in nodeJS and the backend was built with firebase and react router dom.
Also, if someone can link the official twitter api nodejs documentation I'd appreciate it. Haven't found it if there is any.
It looks like twitter API doesn't have CORS support . You may try workarounds like extensions or Postman/Curl etc as mentioned here -
https://stackoverflow.com/a/35898961/7895283
https://twittercommunity.com/t/will-twitter-api-support-cors-headers-soon/28276/6
I have been trying to use a web API in javascript but I repeatedly keep getting this error:
Access to fetch at
'https://eodhistoricaldata.com/api/fundamentals/AAPL.US?api_token={token}'
from origin 'http://127.0.0.1:5500' has been blocked by CORS policy:
The 'Access-Control-Allow-Origin' header has a value
'https://eodhistoricaldata.com/*' that is not equal to the supplied
origin. Have the server send the header with a valid value, or, if an
opaque response serves your needs, set the request's mode to 'no-cors'
to fetch the resource with CORS disabled.
How should I resolve this? I installed a plugin to set the desirable header but others can't install the plugin to view data.
Perhaps this is what you meant, but it's the HTTP response from your API at 'https://eodhistoricaldata.com/' that must include the Access-Control-Allow-Origin header in its HTTP responses.
If the value of that header is 'https://eodhistoricaldata.com/*', your web browser will trigger a CORS error if you call that API from code hosted in any domain other than 'https://eodhistoricaldata.com'. To fix this, you need to change the value your API returns for this header to the domain you want to allow to call your API.
Returning the value * for the Access-Control-Allow-Origin header will allow applications from any domain to call your API without a CORS error.
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 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.
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.