CORS error after fetch of BDD Rails 7 (in React) from AWS S3 compartment connection

Viewed 15

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

0 Answers
Related