CORS Issue With Self Hosted Kratos

[GautDel]

Hello all,

I have a home server on which I run a VM running debian where I do all my dev work from. I then ssh into the machine and access any endpoints from my personal computer's browser. (This may play into the issue?)

I have an instance of kratos self hosted as well as a server and frontend all running on the same domain, but using different ports.

Every time I try to make any sort of request to the kratos server instance from my frontend app, I am met with a CORS error. However, if I make a direct request using the search bar, there are no issues.

Here is the current error:

"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://(ipaddress of server):4455/sessions/whoami (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 404."

The request is coming from http://(ipaddress of server):5173 where the frontend react app lives,

I've tried adding the react address to the kraken.yml config file under "allowed_origins", but nothing... I'm lost and in need of a bit of direction, if anyone is willing to spend the time?

Any ideas?

Thank you!

[vinckr]

Hello @GautDel
Cross-Origin Resource Sharing (CORS) errors are a common issue when making requests from a different domain, protocol, or port.

Here are a few steps you can take to resolve this issue:

• Configure CORS in Ory Kratos: Ory Kratos' Public API supports CORS out of the box. You need to set the following values in your configuration file (kratos.yml):

serve:  
 public:  
 cors:  
 enabled: true  
 allowed_origins:  
 - http://your-ip-address:5173
 allowed_methods:  
 - POST  
 - GET  
 - PUT  
 - PATCH  
 - DELETE  
 allowed_headers:  
 - Authorization  
 - Cookie  
 - Content-Type  
 exposed_headers:  
 - Content-Type  
 - Set-Cookie

Replace http://your-ip-address:5173 with the actual address of your frontend react app. This configuration allows CORS requests from your frontend app to the Ory Kratos server.

• Ensure your UI and Ory Kratos are on the same top-level domain: Ory Kratos and your UI must be hosted on the same top-level domain. You cannot host Ory Kratos and your UI on separate top-level domains.
• Use Ory Tunnel for local development: This is a tool for Ory Network, but I think it should also work for self-hosted Ory Kratos. To solve CORS errors during local development, you can use Ory Tunnel. In production, you should add your domain to the Ory Project so that all requests from your frontend can be made to Ory under the same domain.

If you've done all these and you're still encountering the issue, it might be helpful to read more about CORS on Mozilla's documentation.
I hope this helps!

[vinckr]

Can you post the full request with headers?
Maybe the header is just missing?

[jonas-jonas]

Without knowing too much about the setup, the port of the /sessions/whoami call should be 4433 if you left everything to the defaults.
4455 is typically the UI in our examples.

[GautDel]

Without knowing too much about the setup, the port of the /sessions/whoami call should be 4433 if you left everything to the defaults. 4455 is typically the UI in our examples.

To simplify, I've created a completely new project only following your guides at the following links:

For self-hosting Kratos - https://www.ory.sh/docs/kratos/quickstart
For a frontend application - https://www.ory.sh/docs/getting-started/integrate-auth/react

The only part I am unable to do is the tunnel as I need a project slug, which I don't believe pertains to a self-hosted instance of kratos.

This bit of code:

const basePath = process.env.REACT_APP_ORY_URL || "http://localhost:4000/"
const ory = new FrontendApi(
new Configuration({
basePath,
baseOptions: {
withCredentials: true,
},
}),
)

Where shall I point base path if not using a tunnel?

I want to also take this time to thank you for your patience. I'm an aspiring backend dev, and this is all quite overwhelming.

[GautDel]

If I set the basePath variable to 127.0.0.1:4455, the kraken instance throws this in the terminal:

time=2023-10-20T17:01:44Z level=info msg=completed handling request func=github.com/ory/x/reqlog.(Middleware).ServeHTTP file=/go/pkg/mod/github.com/ory/x@v0.0.551/reqlog/middleware.go:146 http_request=map[headers:map[accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,/*;q=0.8 accept-encoding:gzip, deflate, br accept-language:en-US,en;q=0.5 connection:keep-alive cookie:[csrf_token_806060ca5bf70dff3caa0e5c860002aade9d470a5a4dce73bcfa7ba10778f481=L4bO4DFexc7pbxqDUoenkedPvr2zyGMrCRXPk7gzmVI=; ory_kratos_session=MTY5NzgyMDQwMXwzNjMyVTg3UEpCM0Jva3hqYTc3U1lmQVJrZndlZmhwRmNtTnpVZGxpUzdHeEFFSDNNbi00UUZYcGJMbkhhOGc5cTdfbng4ZTB6dHZ5N0xCU0dRN1R2OXpfTUpoQWdZVFd5aXZ2dk1jQ1RsVU9qS0lyTDEyanI3Q3lTcjRUQ1JlbmNOUVFxbWc0UnNjR21UR2RKV0ZBblNDeHE3eHU1Z1lvT18xWjR1ZUl1MUtzb2VfcW1fZzA3LTdxSGZUbS0wampYWnQ4RldOaXBLUDE5X3R2RFhjWl9MLWFpRnVIZWVnYnVzVWlKdkx6a1hmbUxaT3JxNU5LUXNBRjFnZGgwRXB3aFh2MWRHbWhIZTdNQTVBRlVUVTl0Zz09fOhBzB4XHkcJoV3bmBsY37auu70CiduMbz-4_YpLv5G8] dnt:1 referer:http://127.0.0.1:3000/ sec-fetch-dest:document sec-fetch-mode:navigate sec-fetch-site:cross-site sec-gpc:1 upgrade-insecure-requests:1 user-agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/118.0] host:127.0.0.1:4433 method:GET path:/self-service/login/browser query:aal=&refresh=&return_to= remote:172.18.0.1:34268 scheme:http] http_response=map[headers:map[cache-control:private, no-cache, no-store, must-revalidate content-type:text/html; charset=utf-8 location:http://127.0.0.1:3000/ vary:Origin] size:49 status:303 text_status:See Other took:1.525117ms]

[vinckr]

Hey @GautDel

No worries, hosting this yourself is not trivial.

Where shall I point base path if not using a tunnel?

To where you deploy Ory Kratos! Can also be localhost.

Your kraken error, is that really an error? 303 See Other is the correct response for the redirect AFAIK.
Also you send the kratos session and CSRF token, so that checks out.
Do you see an error in the Kratos console for that request? Bc if not, it might then also be an issue with docker (or Kraken - not sure what that is to be honest).

[fraschm1998]

Hey @GautDel did you end up getting this to work? I have a very smilar setup and am trying to setup ory tunnel but it's asking for my project slug for a self hosted kratos instance

[vinckr]

Point to the public API of your self-hosted instance instead @fraschm1998

[roy-ruby]

@fraschm1998 @GautDel did you resolve it?