Rails App as Backend with Cross-Origin Request Blocked

Questions / Help
1

Hello there, thanks for passing by.

Im deploying a rails application to serve as an API for a React frontend. Given the fact that this is a Backend i enabled the ‘rack-cors’ middleware and created the initializer as per the documentation as follows:

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*' //For debug im letting everything pass.
    resource '*', headers: :any, methods: [:get, :post, :patch, :put]
  end
end

However, when trying a fetch request, i get this error: “Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://rails-project-whereisbackend.fly.dev/characterCoordinates.json. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200”. The JSON file is in the public folder, where i tough that there wouldnt be any problems with the CORS policy, but im still not able to get the file via fetch. I tried to serve the file trough a controller but got the same result.

This is the code for the static controller:

class StaticController < ApplicationController
  def character_coordinates
    render file: Rails.root.join('public', 'characterCoordinates.json'), content_type: 'application/json'
  end
end

and the route:

get '/characterCoordinates.json', to: 'static#character_coordinates'

The request headers are as follow:

GET /characterCoordinates.json HTTP/2
Host: rails-project-whereisbackend.fly.dev
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:130.0) Gecko/20100101 Firefox/130.0
Accept: /
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br, zstd
Referer: http://localhost:5173/
Origin: http://localhost:5173
Connection: keep-alive
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
Priority: u=4
TE: trailers

and the response headers:

HTTP/2 200
etag: W/“726-66eb9da0.0”
last-modified: Thu, 19 Sep 2024 03:42:24 GMT
accept-ranges: bytes
content-encoding: zstd
content-type: application/json
date: Tue, 24 Sep 2024 20:41:43 GMT
fly-cache-status: HIT
cache-control: public, max-age=0, must-revalidate
server: Fly/0c45e4378 (2024-09-20)
via: 2 fly.io
fly-request-id: 01J8JW9FG0TV33F3SRGWAZPWNE-bog
X-Firefox-Spdy: h2

I would thank any and all advice you can give me.

Cheers,
@andrefe91

2

Do you need :options, :head? For preflight requests.

3

Thank you for your reply !!

Initially didnt see any preflight request being done by the browser previously to the CORST denied request, so i didnt add the :options and :head methods. I updated the code with them to try:

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '*', headers: :any, methods: [:get, :post, :patch, :put, :options, :head]
  end
end

Sadly, im still getting the same CORS blocked error and really dont know why. Sorry i can give more diagnostic information, im still learning all this.

Ah, one thing to add. In development the app was working and i think was thanks to this flag:

config.action_cable.disable_request_forgery_protection = true

but i dont see the same option it in the production.rb…

4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.