Yet another CORS issue

[vutsalsinghal]

Shlink web client version

• Client Version: [v3.9.1]
• Server Version: [v3.4.0]
• How do you use shlink-web-client: Docker image (for both client and server)

Summary

I went through all the troubleshooting docs, went through several closed issues related to CORS in this repo but idk if its my setup or what...

Description

I've the server hosted on sh.my-domain.com and client on sh-client.my-domain.com. I've 1 virtual machine running both server (port 5232) and client(port 5233) as well as nginx (port 80/443).

Error that I'm getting is (typical CORS error)

Access to fetch at 'https://sh.my-domain.com/rest/v3/health' from origin 'https://sh-client.my-domain.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I've added the CORS headers on the nginx block (for the shlink server) and when I do "curl -v" (from inside the shlink-web-client container), you can see the access-control-allow-origin header below (omitted unnecessary headers...).

curl -v https://sh.my-domain.com/rest/v3/health
* Connected to sh.my-domain.com port 443 (#0)
*  SSL certificate verify ok.
> GET /rest/v3/health HTTP/2
> Host: sh.my-domain.com
> user-agent: curl/7.86.0
> accept: */*
> 
< HTTP/2 200 
< date: Sun, 29 Jan 2023 03:17:34 GMT
< content-type: application/health+json
< content-length: 120
< access-control-allow-origin: *
< x-request-id: c7bf385460
< cf-cache-status: DYNAMIC
< report-to: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v3?G3sH"}],"group":"cf-nel","max_age":604800}
< nel: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
< server: cloudflare
< cf-ray: 790edC
< alt-svc: h3=":443"; ma=86400, h3-29=":443"; ma=86400
< 
* TLSv1.2 (IN), TLS header, Supplemental data (23):
* Connection #0 to host sh.my-domain.com left intact
* 
{"status":"pass","version":"3.4.0","links":{"about":"https://shlink.io","project":"https://github.com/shlinkio/shlink"}}/

Your help/insight would be much appreciated!

[vutsalsinghal]

I had another question (Q2), is there a way the client could communicate to server via internal network. Basically consider a backend and database type of relation - in docker-compose you can define a network for backend and DB and then you're good to go. Since I'm hosting both (server and client) in same network, I tried to set server as the localhost:port but that didnt work

[acelaya]

No, because shlink-web-client is running 100% in the browser, so the communication happens from your browser to your Shlink instance. There's no server-to-server communication at all.

[vutsalsinghal]

True... perhaps in future this could be feasible (related #342)

[acelaya]

No, it has nothing to do with that. It's just designed that way.

I'm planning to eventually create a new shlink-dashboard with it's own backend. This one would offer more options and consume Shlink server-to-server.

[acelaya]

I see you are using cloudflare. The CORS issue is probably happening because it is blocking the preflight request. Try to run the same cURL, but with OPTIONS method.

[vutsalsinghal]

I had the same suspicion... let me try to find a fix. Thanks for the quick help.

PS - just to clarify for anyone else in similar situation, I'm using cloudflare tunnel in front of nginx on my local virtual machine to expose internal services.

[vutsalsinghal]

Curl with OPTIONS does also contain the expected header

/ # curl -v -X OPTIONS https://sh.my-domain.com/rest/v3/health
* Connected to sh.my-domain.com (172.67.166.137) port 443 (#0)
*  SSL certificate verify ok.
> OPTIONS /rest/v3/health HTTP/2
> Host: sh.my-domain.com
> user-agent: curl/7.86.0
> accept: */*
> 
< HTTP/2 204 
< date: Sun, 29 Jan 2023 12:19:45 GMT
< content-type: text/html
< access-control-allow-origin: *
< allow: GET
< x-request-id: b5b916e
< cf-cache-status: DYNAMIC
< report-to: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v3?s=2WtS1oj%2hLp"}],"group":"cf-nel","max_age":604800}
< nel: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
< server: cloudflare
< cf-ray: 7911eb-SJC
< alt-svc: h3=":443"; ma=86400, h3-29=":443"; ma=86400
< 
* Connection #0 to host sh.my-domain.com left intact
/ #

[acelaya]

That's not the only header needed for CORS to work. See the screenshot above.

Cloudflare is stripping out some important headers.

[acelaya]

Oh, you also need to send the Origin header to the OPTIONS request, in order to mimic the browser behavior.

[vutsalsinghal]

I've added the missing cors headers in nginx shlink-server block and ran the following from shlink-web-client docker container

/ # curl -v -H "Origin: https://sh-client.my-domain.com" -X OPTIONS https://sh.my-domain.com/rest/v3/health

* Connected to sh.my-domain.com port 443 (#0)
*  SSL certificate verify ok.
* Using HTTP2, server supports multiplexing
> OPTIONS /rest/v3/health HTTP/2
> Host: sh.my-domain.com
> user-agent: curl/7.86.0
> accept: */*
> origin: https://sh-client.my-domain.com
> 
< HTTP/2 204 
< date: Sun, 29 Jan 2023 12:38:15 GMT
< content-type: text/html
< access-control-allow-headers: 
< access-control-allow-headers: x-api-key
< access-control-allow-methods: GET
< access-control-allow-origin: *
< access-control-max-age: 3600
< allow: GET
< x-request-id: 8c50814b
< cf-cache-status: DYNAMIC
< report-to: {"endpoints":[{"url":"https:\/\/a.nel.cloudJK8"}],"group":"cf-nel","max_age":604800}
< nel: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
< server: cloudflare
< cf-ray: 7912061d19d7945e-SJC
< alt-svc: h3=":443"; ma=86400, h3-29=":443"; ma=86400
< 
* Connection #0 to host sh.my-domain.com left intact
/ # 

[vutsalsinghal]

On a side note: In order to remove the CORS error, I tried serving both backend and frontend from same subdomain. Backend from path "/back" (using BASE_PATH env variable) but it didn't work...

sh.my-domain.com -> frontend
sh.my-domain.com/back -> backend

Do you see any flaw with this logic?

[acelaya]

Maybe try this? https://github.com/shlinkio/shlink-web-client/discussions/793

[vutsalsinghal]

That solved my issue! I know its a workaround but a very nice one!