Hello everyone. We are using the Ory network with ...
# ory-network
b
Hello everyone. We are using the Ory network with a paid plan in our website but we are encountering a CORS error:
Access to 'https://<slug>.<http://projects.oryapis.com/oauth2/token|projects.oryapis.com/oauth2/token>' from origin '<https://mysite.localtest.me>' was blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response meets your needs, set the request mode to 'no-cors' to retrieve the resource with CORS disabled.
We enabled cors with the command:
ory patch oauth2-config <clientId> --replace '/serve/public/cors/enabled=true'
and added allowed_origins:
ory patch oauth2-config <clientId> --replace '/serve/public/cors/allowed_origins=["<https://mysite.localtest.me>","*"]'
But it's not reflected on the GUI, and not working for us.
p
Hi @breezy-journalist-86771 You need to configure your custom domain on your project. Then add your custom domain as the SDK URL to your project. https://www.ory.sh/docs/guides/custom-domains
f
I think that this is only a workaround rather than a solution. Once you have a custom domain, then the SPA hosted on https://mydomain will get the token from https://mydomain/oauth2/token and therefore there will be no more cross origin issue right?
For the context, I am in the same company than @breezy-journalist-86771 and work with him on this issue
To me, it appears that the SPA hosted on https://mydomain should be able to get the token from https://ory-slug/oauth2/token provided that https://ory-slug/oauth2/token allows the origin https://mydomain .
Is there something wrong with that analysis?
I think that we can use custom domain and everything will be ok. But we also need to understand if this is because it does not make sense not to use a custom domain (and the analysis above is somehow wrong) so that we can learn from that experience.
So far, we assume that if hydra in ory-network supported cors, as the configuration suggests, everything would work without needing a custom domain.
In any case, thank you @proud-plumber-24205 for taking the time to answer the question. This is very much appreciated πŸ™‚
p
Hi @fresh-carpet-18970 Once you have a the domain https://auth.mydomain added to Ory, you can call it from your SPA at https://mydomain. Then CORS won't apply anymore. Ory also allows setting CORS for your custom domain on the project (e.g. auth.mydomain)
It's not a workaround! it is how you more to production with Ory πŸ™‚
πŸ‘ 1
f
Thank you for the answer @proud-plumber-24205
In that case, when do a user need to enable cors in hydra using
hydra_serve_public_cors_enable
and
hydra_serve_public_cors_allowed_origins
?
If not in our situation ?
IIUC, those can also be seen in the project configuration at the following json paths
.services.oauth2.config.serve.public.cors.enabled
and
.services.oauth2.config.serve.public.cors.allowed_origins
By project configuration here, I mean the file that is available using
ory get project --format json
p
CORS is handled through the custom domain setup on the project πŸ™‚
are you perhaps developing locally against Ory?
When developing locally, please use the Ory tunnel. https://www.ory.sh/docs/guides/cli/proxy-and-tunnel After deploying your web app to your server on a specific domain, setup a custom domain on the project and point your web app to that custom domain. On the Ory Console you will see CORS settings under the custom domain you have added.
f
Ok thank you for answer
@proud-plumber-24205 Out of curiosity, what version of hydra is currently running in ory network? Or is there a way to find out on our own?
p
I'ts always on the latest
f
Great thanks
b
@proud-plumber-24205 We have CORS configured on a custom domain and it still does not work - no
access-control-allow-origin
header added in responses from Ory Cloud
Copy code
❯ curl -X GET -I <https://idp.wesaluteapis.com/.well-known/openid-configuration>
HTTP/2 200
date: Mon, 15 May 2023 07:30:22 GMT
content-type: application/json; charset=utf-8
cache-control: private, no-cache, no-store, must-revalidate
vary: Origin,Origin
cf-cache-status: DYNAMIC
set-cookie: __cflb=04dTofjtHwhfCny3TibZzRnKNQfNMfGGxmgM3c4DEK; SameSite=None; Secure; path=/; expires=Mon, 15-May-23 08:30:22 GMT; HttpOnly
server: cloudflare
cf-ray: 7c79acd9ca176943-FRA
f
@gentle-dream-91391 To test whether CORS works, you need to perform a preflight request
Something like this
curl -X OPTIONS -I <https://idp.wesaluteapis.com/.well-known/openid-configuration> -H 'Access-Control-Request-Method:GET' -H 'Origin:<http://idp.wesaluteapis.com|idp.wesaluteapis.com>'
The fact that this commands returns nothing tells me that the origin that will request the openid configuration is not
<http://idp.wesaluteapis.com|idp.wesaluteapis.com>
. Use yours instead of
<http://idp.wesaluteapis.com|idp.wesaluteapis.com>
and you should see in the returned data something like
access-control-allow-methods: GET
And
access-control-allow-origin: <your origin>
b
Like this?
Copy code
❯ curl -X OPTIONS -I <https://idp.wesaluteapis.com/.well-known/openid-configuration> -H 'Access-Control-Request-Method:GET' -H 'Origin:<http://www.example.com|www.example.com>'
HTTP/2 204
date: Mon, 15 May 2023 13:22:38 GMT
vary: Origin,Access-Control-Request-Method,Access-Control-Request-Headers
cf-cache-status: DYNAMIC
set-cookie: __cflb=04dTofjtHwhfCny3TibZzRnKNQfNMfGKaYSqXPvXcF; SameSite=None; Secure; path=/; expires=Mon, 15-May-23 14:22:38 GMT; HttpOnly
server: cloudflare
cf-ray: 7c7bb0ddce70923e-FRA
Still no CORS headers in the response.
@high-optician-2097 Maybe you could also chime in here? We are trying to use the PKCE flow, but Hydra (Ory Cloud) does not seem to set the CORS headers at all. For now, we are setting those at the CDN level (Cloudflare).
h
We merged yesterday a patch to support CORS but it’s not yet documented and I believe only settable via the API. @steep-lamp-91158 are you writing docs for this or a UI=
s
what you have to do is set the client CORS origins, either on the Ory Console, or using
ory patch oauth2-config <clientId> --replace '/serve/public/cors/allowed_origins=["<https://mysite.localtest.me>","*"]'
to enable cors, you have to use this workaround in the JS console on https://console.ory.sh while being on the correct project:
Copy code
const projectId = new URL(window.location).pathname.split("/")[2]
await fetch(`<https://api.console.ory.sh/normalized/projects/${projectId}/revision/${(await> fetch(`<https://api.console.ory.sh/normalized/projects/${projectId}>`, { credentials: "include" }).then(r => r.json())).current_revision.id}`, { credentials: "include", method: "PATCH", body: JSON.stringify([{ op: "replace", path: "/serve_public_cors_enabled", value: true }])})