I use API Gateway on AWS.
First, I activated CORS option and send a request on axios, then it worked.
And I activated content-encoding and I added axios option
axios.defaults.headers.post['Content-Encoding'] = 'gzip'
Then CORS error occured.
How can I solve it?
Should be
headers: {
'Accept-Encoding': 'gzip',
},
Did you add correct headers directly to your axios POST ?
Maybe you could try
axios.post(your-url, {
headers: {
'Content-Encoding': 'gzip'
}
})
Related
I'm having trouble making a post request to a lambda function with axios in my web app. I get back the error message "Access to XMLHttpRequest at 'lambdalink' from origin 'http://localhost:4200' 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."
Code for the axios request:
const config = {
method: 'post',
url: 'lambdalink',
headers: {
'Access-Control-Allow-Origin': '*',
},
data: {
info: JSON.stringify(data)
}
};
Axios(config)
.then(function (response) {
console.log(JSON.stringify(response.data));
})
.catch(function (error) {
console.log(error);
});
When I make the request without the data param in the config the request goes through just fine, but once I add data to it I get that error. My CORS configuration for the lambda function is as follows:
Access-Control-Allow-Origin:
"*", "http://localhost:4200/", "http://localhost:4200"
Access-Control-Allow-Headers:
"access-control-allow-origin"
Access-Control-Allow-Methods:
"POST"
I've tried different combinations of these settings, but no luck. Am I missing something server side or am I just not handling CORS correctly in the browser?
I am trying to send a fetch request to AWS API gateway but it keeps giving me this error. I am doing it from the admin side in WordPress.
Access to fetch at
'https://34557322456.execute-api.ap-southeast-1.amazonaws.com/V1/code?kdata=something' from origin 'https://mywebsite.online' 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.
This is the request
fetch('https://34557322456.execute-api.ap-southeast-1.amazonaws.com/V1/code?kdata=something', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
},
}).then(response => {
return response.json()
})
.then(data => console.log(data))
.catch(error => console.log(error));
Please help
The headers should be on the server side, try something like this in your .php file:
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: 'X-Requested-With,content-type'");
header("Access-Control-Allow-Methods: 'GET, POST, OPTIONS, PUT, PATCH, DELETE'");
I'm trying to connect my a React Application to a Django Server. The React application is running on http://127.0.0.1:3000/
The response headers has Access-Control-Allow-Origin: http://127.0.0.1:3000 set, yet I am still seeing the error.
I am currently using Django's corsheaders package as recommended everywhere. Decent example of the recommendation How can I enable CORS on Django REST Framework.
But I have also tried custom middleware at this point.
My Django Settings.py file contains the following
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
...
]
Django is on 8000, React on 3000
CORS_ORIGIN_WHITELIST = [
'http://127.0.0.1:3000',
'http://localhost:3000',
'http://127.0.0.1:8000',
'http://localhost:8000',
]
My request in react looks like this. (It works when I run it directly, not through the browser)
const fetch = require('node-fetch')
const response = await fetch(
url,
{
json: true,
method: 'GET',
headers: {
'Access-Control-Allow-Origin': '*',
Accept: '*/*',
'Content-Type': 'application/json'
}
}
)
Again, it is so strange that I am making the request from http://127.0.0.1:3000 and the response headers has Access-Control-Allow-Origin: http://127.0.0.1:3000 but for some reason it is still failing.
Oh the error message in the browsers console is
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8000/query/?date=2019-10-25. (Reason: missing token ‘access-control-allow-origin’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8000/query/?date=2019-10-25. (Reason: CORS request did not succeed).
Any help would be awesome! Thanks
#sideshowbarker figured it out. It was because I was sending headers in my request.
Changing
const fetch = require('node-fetch')
const response = await fetch(
url,
{
json: true,
method: 'GET',
headers: {
'Access-Control-Allow-Origin': '*',
Accept: '*/*',
'Content-Type': 'application/json'
}
}
)
to
const fetch = require('node-fetch')
const response = await fetch(
url,
{
json: true,
method: 'GET'
}
)
Immediately fixed the issue! Thank you!
I'm using AWS Lambda function setup with the API Gateway. I have been trying to set-cookies to the application but even though it shows in the console headers, it is not setting up in the browser.
callback(null, {
statusCode: 302,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS',
'Location': "https://example.com",
'Set-Cookie': cookieString,
'Content-Type': 'application/json'
},
body: null
} );
https://aws.amazon.com/blogs/compute/simply-serverless-using-aws-lambda-to-expose-custom-cookies-with-api-gateway/
Tried implementing this but in the browser cookies were not set.
Try to set the Path of your cookie:
Set-Cookie:myCookie=foo; Path=/; HttpOnly
After changing the s3 bucket hosted static website to an API gateway, cookies passed
http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Cookies.html
I'm having a problem with FineUploader 4.4 in Firefox. As you know, Firefox sends the following HTTP accept header by default:
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
But since AmazonS3 returns JSON data after I upload a file via POST with FineUploader, I need to override FineUploader to send an application/json Accept header:
$('#demoUploader').fineUploaderS3({
autoUpload: true,
request: {
endpoint: "https://s3.amazonaws.com/myapp",
accessKey: "AKIAJ4VQLGW68A2Y6JLQ",
customHeaders: { 'Accept': 'application/json' }
},
... etc
But this is not working. FineUploaderS3 ignores my customHeader option and still sends the default Accept header. What am I doing wrong?
Solved! Thanks #RayNicholus
I had to add the customHeaders option to my uploadSuccess endpoint in order to force Firefox to send the application/json Accept header.
uploadSuccess: {
endpoint: "/api/amazons3/uploadSuccessful",
customHeaders: { 'accept': 'application/json' }
},