CSRF Token with the “SameSite” attribute value “Lax” or “Strict” was omitted because of a cross-site redirect - fetch

Question

I am using Kratos in my local environment just fine, works great and does what I want it to do, however the main issue I am facing is when I moved my ory kratos location to a droplet and my frontend to my vercel. On the droplet I have setup kratos as show here with nginx. After setting it up I tested my login flow and got these error's when I requested /self-service/registration/flows?id=${flowId}
Thinking I setup my config incorrectly I set it up as seen here.
version: v0.10.1
dsn: postgres://kratos:MYPASSWORD/kratos?sslmode=disable&max_conns=20&max_idle_conns=4
serve:
public:
base_url: http://127.0.0.1:4433/
host: 127.0.0.1
cors:
allow_credentials: true
allowed_origins:
- https://frontend.example.com
allowed_methods:
- POST
- GET
- PUT
- PATCH
- DELETE
allowed_headers:
- Authorization
- Cookie
- Content-Type
exposed_headers:
- Content-Type
- Set-Cookie
enabled: true
admin:
base_url: http://kratos:4434/
host: 127.0.0.1
selfservice:
default_browser_return_url: https://frontend.example.com
allowed_return_urls:
- https://frontend.example.com
methods:
password:
enabled: true
oidc:
enabled: false
flows:
error:
ui_url: https://frontend.example.comerror
settings:
ui_url: https://frontend.example.comsettings
privileged_session_max_age: 15m
recovery:
enabled: true
ui_url: https://frontend.example.comrecovery
verification:
enabled: true
ui_url: https://frontend.example.comverification
after:
default_browser_return_url: https://frontend.example.com/
logout:
after:
default_browser_return_url: https://frontend.example.com/
login:
ui_url: https://frontend.example.com/login
lifespan: 10m
registration:
lifespan: 10m
ui_url: https://frontend.example.com/registration
after:
password:
hooks:
- hook: session
oidc:
hooks:
- hook: session
log:
leak_sensitive_values: false
# set in SECRETS_COOKIE and SECRETS_DEFAULT env variables
secrets:
default:
- 795135465767325463454 #fake
cookie:
- 223108c7839f6324242342 #fake
cookies:
domain: frontend.example.com
path: /
same_site: Lax
session:
lifespan: 72h
cookie:
domain: frontend.example.com
path: /
same_site: Lax
hashers:
argon2:
parallelism: 1
memory: 128MB
iterations: 2
salt_length: 16
key_length: 16
identity:
default_schema_id: default
schemas:
- id: default
url: file:///root/kratos/config/identity.schema.json
courier:
smtp:
connection_uri: smtps://test:test#mailslurper:1025/?skip_ssl_verify=true
The issue still persisted so I checked my code
const req: any = await fetch(`https://frontend.example.com/self-service/${flow}/flows?id=${flowId}`, {
method: 'GET',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
credentials: 'include',
}).catch((err) => {
throw err;
}); //error
everything seems fine, I have credentials and my Content-Type was correct, Then doing some research I found this https://github.com/ory/kratos/issues/662 I was wondering, would this effect me in my situation (I have my frontend domain https://frontend.example.com and my kratos droplet https://kratos.example.com are examples), and if so how I could go about fixing it(could I use the ory-proxy to get cookies to my application safely?)? My idea was that I could simply setup ory hydra has the oauth provider for my platform but I am not sure.
Also,
Thanks in advance!