This question already has answers here:
Configure CORS response headers on AWS Lambda?
(5 answers)
Closed 3 years ago.
I have only been using AWS Lambdas for a few weeks, and I am trying to learn more about them specifically how to implement a Lambda I write on a webpage.
I have a project, I am working on in my local machine which is just a website, and some JavaScript with Axios. When I deploy my code to AWS Lambda using Serverless at the end of the output , I get a url, lets call it THE_URL. When I copy and paste this page into my browser, I am brought to a web-page which has the response on it as I expect.
But on my website, I have this script being called when I press a button,
axios
.get("THE_URL")
.then(data => console.log(data))
.catch(err => console.log(err));
And this gives me the error Access to XMLHttpRequest at 'THE_URL' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Which I have looked up and it seems is fairly common. I have researched and looked into the possible solutions that there were online, and that lead me to passing in as headers, and flagging the request so it looked like this,
axios
.get("THE_URL",
{headers: {
"Access-Control-Allow-Origin": "*"
},
withCredentials: true
}
)
But with this, I then get an error which looks like this Access to XMLHttpRequest at 'THE_URL' from origin 'null' 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. Which I have not been able to find any solutions for online. So I figured I would ask here, and see if any of you people have ran into any errors like this?
Thanks for reading!
The CORS header should be in your server, not the client. The server controls which client domains may access it. By adding the "*" you are allowing any site to request a resource from your server, including localhost (assuming your lambda is publicly accessible)
Update the lambda to return the Access-Control-Allow-Origin: * header.
https://serverless.com/framework/docs/providers/aws/events/apigateway/#enabling-cors
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
This question already has answers here:
XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header
(11 answers)
Closed 2 years ago.
I'm creating a React application that fetches data from Deezer Api
Currently, I'm trying to get top albums https://api.deezer.com/chart/0/tracks :
I created a function that requests the data
fetchTopAlbums = () => {
return fetch('https://api.deezer.com/chart/0/tracks', { 'Accept': 'application/json', })
.then((res) => res.json())
}
On calling this function I get this error in the console
Access to fetch at 'https://api.deezer.com/chart/0/tracks' from origin 'http://localhost:3000' has been blocked by CORS policy: 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.
Error Image can be accessed here
The deezer api is restricting API calls made from websites. It does this to specifically block what you are trying to do. In general this is the purpose of CORS to stop unexpected websites from accessing other websites backends. Some services allow any site to access them other ones require you to access that service via a backend between your side and the API in question.
This question already has answers here:
How does the 'Access-Control-Allow-Origin' header work?
(19 answers)
Closed 3 years ago.
I am trying to make POST and GET requests to a local .NET Core Web API. I learned about the CORS problem for the first time today and I am able to get GET requests to work by simply installing the Google Chrome extension called "Allow-Control-Allow-Origin: *".
However, my POST request fails each time due to the CORS policy. It is so annoying and I can't find an easy or reliable work-around. I am not too considered about making CORS work in every browser. Even if I could get it to work in Google Chrome alone with be a life saver.
I've looked around and there isn't a streamlined solution that has worked for me yet.
My call to the Web API looks like this from within my React App.
axios.post('https://localhost:44395/api/record/create', { Status: "Initiated", Owner: "Peter Porcupine", DateTimeCreated: new Date().getTime(), LastTimeCreated: new Date().getTime(), Comment: { TimeStamp: new Date().getTime(), Text: "Comment sent to API." }})
.then(response => {
console.log("Response below from post request");
console.log(response);
});
The call returns a 404, and I also get the following error:
Access to XMLHttpRequest at 'https://localhost:44395/api/record/create' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
I tried to make the POST request using Postman with a similar body and it works and updates my database. I'm certain it isn't an issue related to what body I send the API.
Your server should be sending response. The header of that response must be changed for CORS to work.
Add these three lines while you send response to client:
context.Response.Headers.Add("Access-Control-Allow-Origin", "*");
context.Response.Headers.Add("Access-Control-Allow-Methods", "POST, GET,
OPTIONS,DELETE");
context.Response.Headers.Add("Access-Control-Allow-Headers", "Origin, Content-Type,
Accept");
This question already has answers here:
from origin 'xxx' has been blocked by CORS policy: [duplicate]
(2 answers)
Closed 3 years ago.
I'm trying to authenticate over OAUTH API using Axios. The initial request is just a simple GET to get the auth token.
axios.get(
"https://github.com/login/oauth/authorize?client_id=$ID"
).then((res) => { console.log(res) })
I immediately get:
...from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I can use an href link and it works totally fine. What could be the issue here?
In simple terms, when you are using the anchor tag, it is a link to the original site. When user click on a tag, user will be redirected to that site. But when an AJAX request user will stay in your site and sends an ajax request to the server(github in this case).
When using HTTP protocol there is a header call origin which will tell the backend server where user is from, see the below picture
So if server does not allow sources other than it self, this security check will be failed and the AJAX request won't be success. Please let me know if you need more clarifications and I'll be glad to help. Hope that helps.
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