Code Monkey home page Code Monkey logo

Comments (8)

fholmqvist avatar fholmqvist commented on September 27, 2024 1

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.

from lapis.

leafo avatar leafo commented on September 27, 2024

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?

from lapis.

fholmqvist avatar fholmqvist commented on September 27, 2024

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()),
})

from lapis.

leafo avatar leafo commented on September 27, 2024

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

from lapis.

fholmqvist avatar fholmqvist commented on September 27, 2024

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.

from lapis.

leafo avatar leafo commented on September 27, 2024

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

from lapis.

ropoko avatar ropoko commented on September 27, 2024

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?

from lapis.

ropoko avatar ropoko commented on September 27, 2024

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;
 }

from lapis.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.