CORS for localhost frontend?

[fholmqvist]

I want to call my server from a frontend (localhost) but I'm getting blocked by CORS.

I've tried fiddling with nginx.conf by setting add_header 'Access-Control-Allow-Origin' "*"; for server and location, and I experimented with lua-resty-cors to no avail. I'm probably missing something obvious.

P.S Thank you for a wonderful framework! I've been using it with SSR for months and I absolutely love it.

[leafo]

CORS issues generally happen when the domain your JavaScript is running on is different than a domain you are trying to request. Can you share these details?

[fholmqvist]

Cheers:

Lapis

$ lapis server

...

[500] OPTIONS /sign-in - {}, client: 127.0.0.1, server: , request: "OPTIONS /sign-in HTTP/1.1", host: "localhost:8080", referrer: "http://localhost:3000/"

JS client, running dev server (vite) on the same machine

const res = await fetch('http://localhost:8080/sign-in', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(fields()),
})

[leafo]

I can see a 500 response code in the log line you shared for lapis. That would be a server error, so you may want to look at content of the request in your browser, or execute it with CURL to see what the error is. If you're using something like respond_to in lapis, then keep in mind you have to explicitly implement an OPTIONS handler

[fholmqvist]

That's the thing, all endpoints work fine against the browser/curl, including things like sessions, getting data from the DB etc. The API isn't broken, only blocking CORS when the browser is making request from a localhost frontend.

For example, I can hit a protected endpoint and get 403, sign in 200, and hit that same endpoint again for 200. If I try to do the same thing from the frontend, I get these errors.

[fholmqvist]

Solved it! nginx configuration issue.

location / {
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Methods *;
  add_header Access-Control-Allow-Headers *;

  if ($request_method = OPTIONS) {
    add_header Content-Type text/plain;
    add_header Content-Length 0;
    return 204;
  }

  default_type text/html;

  content_by_lua_block {
    require("lapis").serve("app")
  }
}

And no-cors on requests in the frontend for dev builds.

[leafo]

That's the thing, all endpoints work fine against the browser/curl, including things like sessions, getting data from the DB etc. The API isn't broken, only blocking CORS when the browser is making request from a localhost frontend.

The logs you shared showed a request that made to your Lapis app returning a 500 status code, aka server error (this would be an uncaught Lua error unless you explicitly returned a 500 status yourself):

[500] OPTIONS /sign-in - {}, client: 127.0.0.1,

The example you gave where you suggested it was not broken would not trigger an OPTIONS, since that is a secondary request created only by browsers during a cross domain request. Hence my suggestion that you likely did not implement an OPTIONS request handler in your Lapis application. I recommend understanding how to read the result of a 500 error as it will help you out with debugging things in the future. Hope that helps

[ropoko]

Solved it! nginx configuration issue.

location / {
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Methods *;
  add_header Access-Control-Allow-Headers *;

  if ($request_method = OPTIONS) {
    add_header Content-Type text/plain;
    add_header Content-Length 0;
    return 204;
  }

  default_type text/html;

  content_by_lua_block {
    require("lapis").serve("app")
  }
}

And no-cors on requests in the frontend for dev builds.

I'm having problems with cors as well, tried this but unfortunately it doesn't work for me, any thoughts?

[ropoko]

the solution was adding the add_header Access .... on the options response

if ($request_method = OPTIONS) {
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Headers *;
  add_header Access-Control-Allow-Methods *;
  add_header Content-Type application/json;
  add_header Content-Length 0;
  return 204;
 }