How to enable CORS when using the development server combined with a second local server (local host) ?

[serge-hulne]

How to enable CORS when using the development server

mint start // runs on localhost:3000

combined with a second local server (local host) // running on e.g. localhost:8080

[gdotdesign]

Hey @serge-hulne

CORS is done on the server side, you need to set up the appropriate response headers for all requests:
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#the_http_response_headers

[gdotdesign]

The development server just serves the HTML, CSS and compiled JavaScript to run the application in the browser. It's the browser who makes requests to the second server (in your setup) which triggers CORS, and thus the second server needs to add the response headers I linked earlier to its responses.

Let me know if it's not the case, in which case I'm probably misunderstanding your setup.

[serge-hulne]

I think it is the other way around. Here is a snippet from my Main.mint and from my Kemal server (Crystal), respectively:

The test server (mint start) runs on its default port (3000) and the local data server runs on port 3000, respectively:

Main.mint

store PersonStore {
  state status : Status = Status::Initial
  state object : String = "valeur initiale"

  fun load : Promise(Never, Void) {
    sequence {
      next { status = Status::Loading }
      response =
        "http://127.0.0.1:2000/data/"
        |> Http.get()
        |> Http.send()

      object =
        response.body
        result = Data(object)
        Debug.log(result)
        next { status = Status::Ok(result) }
    }
    catch Http.ErrorResponse => error {
      next { status = Status::Error("Something went wrong with the request.") }
    }  
  }
}

server.cr

require "kemal"


# ============
# Settings
# ============

IP = "127.0.0.1"
PORT = 2000

Kemal.config.port = (ENV["PORT"]? || PORT).to_i
Kemal.config.host_binding = ENV["HOST_BINDING"]? || "#{IP}"
# Kemal.config.env = "production"

# =======
# Actions
# =======

static_headers do |response, filepath, filestat|
    response.headers.add("Access-Control-Allow-Origin", "*")
end

# Kemal.config.public_folder = "../../dist"

get "/data/" do
  "Hello World!"
end


Kemal.run

Error message received in the dev tools (console) in the browser:

Access to XMLHttpRequest at 'http://127.0.0.1:2000/data/' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[gdotdesign]

That's correct, but you only added the response headers to the static files, not the route you defined. This works (I tested it):

get "/data/" do |env|
  env.response.headers.add("Access-Control-Allow-Origin", "*")
  "Hello World!"
end

[gdotdesign]

Here is a discussion about this specific case static_headers kemalcr/kemal#420 (comment)

[serge-hulne]

Thank you very much!