My project is a Rails 7 and React API in front; I created an AWS S3 compartment to be able to store but as soon as I do a fetch, I have an error that I can not solve:
Access to fetch at 'https://chante-la-vie.herokuapp.com/users' from origin 'http://localhost:3000' 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.
Yet I believe that the CORS file of compartment s3 is correctly filled:
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"PUT",
"POST",
"DELETE"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
In Rails API:
config/storage.yml:
test:
service: Disk
root: <%= Rails.root.join("tmp/storage") %>
local:
service: Disk
root: <%= Rails.root.join("storage") %>
# Use bin/rails credentials:edit to set the AWS secrets (as aws:access_key_id|secret_access_key)
amazon:
service: S3
access_key_id: <%= Rails.application.credentials.dig(:aws, :access_key_id) %>
secret_access_key: <%= Rails.application.credentials.dig(:aws, :secret_access_key) %>
region: us-east-1
bucket: chantelavie-<%= Rails.env %>
config/cors.rb:
Rails.application.config.middleware.insert_before 0, Rack::Cors do
allow do
origins '*'
resource '*',
headers: :any,
methods: %i[get post put patch delete options head],
expose: %w[Authorization Uid]
end
end
Gems:
gem "devise", "~> 4.8"
gem "devise-jwt", "~> 0.9.0"
gem "rack-cors", "~> 1.1"
gem "aws-sdk-s3", "~> 1.113"
gem "dotenv-rails"
Example of fetch data in the React front part:
#code...
function fetchData(e) {
e.preventDefault();
if (password !== passwordConfirm) {
errorNotifyPassword();
return (1)
}
fetch("https://chante-la-vie.herokuapp.com/users", {
method: "post",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
user: {
email: email,
password: password,
},
}),
}).then((response) => {
# more code...
I add has_one_attached :avatar in the model and in the permissions of the controller, added :avatar and I installed active storage of course. I don’t know if it comes from my code or from the configuration of the s3 bucket.
Thanks