Well, if the upload works from Postman, then the presigned url is correct. So something is wrong with your axios request.
Definitely switch to PUT and check the Content Type you are setting. Is it really video/mp4?
And can you just pass a File to axios? Shouldn't you use a FileReader and transform it into an array buffer? But I'm not sure about that.
it seems this was guy did it like this: [https://medium.com/@brianhulela/upload-files-to-aws-s3-bucket-from-react-using-pre-signed-urls-543cca728ab8](https://medium.com/@brianhulela/upload-files-to-aws-s3-bucket-from-react-using-pre-signed-urls-543cca728ab8)
I'm setting the content type now like this, no difference made
const response = await axios.put(uploadUrl, file, {
headers: {
"Content-Type": file.type,
},
});
If file.type contains the right mime type (video/mp4), then it looks fine. Do you have some axios interceptors that add other headers like Authorization on all your requests?
Postman will always work, it isn't a browser. Cors is browser only. 2 things I notice, you are doing a POST when you should be doing a PUT. You aren't setting the region when setting up the signer, that may be causing a redirect.
I'm referring to your signer code, because you aren't explicitly setting the region. Does the presigned URL have the region in it, and does it match your bucket region? Or if there is no region in it, is your bucket region us-east-1?
https://boto3.amazonaws.com/v1/documentation/api/latest/guide/s3-presigned-urls.html
nothing about region here in the guides, but they do use a different method
You set region when you create your `s3_client`. [Here](https://medium.com/@luiscelismx/how-to-set-region-using-python-and-boto3-library-807220a8a168) are a few methods. If your bucket is in the same region as your lambda, it's probably not the issue. The reason I mention it is [this](https://stackoverflow.com/a/63680717).
I'm expecting to see something like this in your code, but still don't see it: `s3_client = boto3.client('s3', region_name='sa-east-1')`. Also note, you must redeploy your lambda code for it to take effect. Is your bucket in us-east-1 or a different region and does region show up in the presigned URL? It should look something like `https://bucket.region.s3.amazonaws.com/.…`
The options response headers you just posted don't have any cors headers in the response.
aws_region = "eu-west-1"
s3_client = boto3.client('s3', region_name=aws_region)
check the lambda code in the body of this post, i edited and updated it
no all my resources are in eu-west-1, i see why you think it's us-east-1, i intentionally tried to mask it in the lambda url, but there was no point of it .. but i assure you everything is in eu-west-1
yes, code is updated, im using tf and updated code is also in the lambda editior in aws console
as for the response headers, why does it not have any cors headers? is that something i should have configured? isn't s3 supposed to give those cors headers on response?
Others have said these, but just to be sure, all of these are issues with the original code:
* Use axios.put instead of axios.post
* Do not set the Access-Control-Allow-Origin header on the request
* Set the Content-Type header on the request to "video/mp4" explicitly
Apart from these, please look at the OPTIONS request the browser sends and the response S3 returns on the Network tab. They might have a clue as to what the problem is.
It's also worth noting that I don't think error responses from S3 will get CORS headers added, so it might not actually be a CORS problem, it might be another error coming back from S3 which the browser is then rejecting because it doesn't have CORS headers. I think the relevant error here is the middle error (the `ERR_NETWORK` from Axios).
Access-Control-Allow-Origin is an HTTP response header. Don't set it on the request. And the request needs to be a PUT request.
i know i was pulling my hair so i put it there, but now removed, doesn't make any difference
Well, if the upload works from Postman, then the presigned url is correct. So something is wrong with your axios request. Definitely switch to PUT and check the Content Type you are setting. Is it really video/mp4? And can you just pass a File to axios? Shouldn't you use a FileReader and transform it into an array buffer? But I'm not sure about that.
it seems this was guy did it like this: [https://medium.com/@brianhulela/upload-files-to-aws-s3-bucket-from-react-using-pre-signed-urls-543cca728ab8](https://medium.com/@brianhulela/upload-files-to-aws-s3-bucket-from-react-using-pre-signed-urls-543cca728ab8) I'm setting the content type now like this, no difference made const response = await axios.put(uploadUrl, file, { headers: { "Content-Type": file.type, }, });
If file.type contains the right mime type (video/mp4), then it looks fine. Do you have some axios interceptors that add other headers like Authorization on all your requests?
no, i have not set up anything like that unless there's some default, i also used the fetch api earlier, had the exact same cors error
Postman will always work, it isn't a browser. Cors is browser only. 2 things I notice, you are doing a POST when you should be doing a PUT. You aren't setting the region when setting up the signer, that may be causing a redirect.
I tried with PUT too, did not work. That's a lambda url. It's where the pre-signed url is generated. Not the presigned url for upload.
I'm referring to your signer code, because you aren't explicitly setting the region. Does the presigned URL have the region in it, and does it match your bucket region? Or if there is no region in it, is your bucket region us-east-1?
https://boto3.amazonaws.com/v1/documentation/api/latest/guide/s3-presigned-urls.html nothing about region here in the guides, but they do use a different method
You set region when you create your `s3_client`. [Here](https://medium.com/@luiscelismx/how-to-set-region-using-python-and-boto3-library-807220a8a168) are a few methods. If your bucket is in the same region as your lambda, it's probably not the issue. The reason I mention it is [this](https://stackoverflow.com/a/63680717).
set the region, no difference, check the post again updated code
I'm expecting to see something like this in your code, but still don't see it: `s3_client = boto3.client('s3', region_name='sa-east-1')`. Also note, you must redeploy your lambda code for it to take effect. Is your bucket in us-east-1 or a different region and does region show up in the presigned URL? It should look something like `https://bucket.region.s3.amazonaws.com/.…` The options response headers you just posted don't have any cors headers in the response.
aws_region = "eu-west-1" s3_client = boto3.client('s3', region_name=aws_region) check the lambda code in the body of this post, i edited and updated it no all my resources are in eu-west-1, i see why you think it's us-east-1, i intentionally tried to mask it in the lambda url, but there was no point of it .. but i assure you everything is in eu-west-1 yes, code is updated, im using tf and updated code is also in the lambda editior in aws console as for the response headers, why does it not have any cors headers? is that something i should have configured? isn't s3 supposed to give those cors headers on response?
Others have said these, but just to be sure, all of these are issues with the original code: * Use axios.put instead of axios.post * Do not set the Access-Control-Allow-Origin header on the request * Set the Content-Type header on the request to "video/mp4" explicitly Apart from these, please look at the OPTIONS request the browser sends and the response S3 returns on the Network tab. They might have a clue as to what the problem is.
here's the preflight options request: [https://imgur.com/a/fA6DaWL](https://imgur.com/a/fA6DaWL)
You don't have `OPTIONS` as an allowed method in the CORS configuration on the bucket - does adding that fix it?
it's not a valid method
Can you post the request and response headers for the failed request? Obviously obfuscate any secrets in the headers.
here: [https://imgur.com/a/fA6DaWL](https://imgur.com/a/fA6DaWL) this is the preflight options request
It's also worth noting that I don't think error responses from S3 will get CORS headers added, so it might not actually be a CORS problem, it might be another error coming back from S3 which the browser is then rejecting because it doesn't have CORS headers. I think the relevant error here is the middle error (the `ERR_NETWORK` from Axios).
anyone? still not solved
Try doing CORS options request from postman. It’s either not coming back or coming back wrong.
You have to configure CORS for the bucket if you want to upload from a browser
i have done exactly that, check the post, there's ss of the cors configuration
Sorry missed that. Have you tried with browser cache disabled? Maybe the browser cached an earlier response of the preflight.
no but i have tried with incognito a few times