CORS not working properly for stac-fastapi with stac-browser

[ianhorn]

Problem description

All the API urls work when I start the containers. I'm even able to access the http://:8081/api.html; however, the STAC-Browser still says I don't have CORS-enabled for 8081.

Expected Output

I added the following to the environment for the fastapi. I removed my ec2 dns

      - CORS_ALLOW_ORIGINS=*
      - CORS_ALLOW_METHODS=GET, POST, PUT, DELETE
      - CORS_ALLOW_HEADERS=Content-Type,Authorization
      - ALLOWED_ORIGINS=*
      - CORS_ORIGINS=*
      - CORS_ORIGINS=<http://ec2DNS>:8085,*
      - API_URL=http://<ec2dns>:8081

Environment Information

EC2 - AMI Amazon Linux 2023
Docker

[vincentsarago]

It depends on your stac-fastapi-pgstac version, the CORS configuration by env variable is available just from 3.0.1 https://github.com/stac-utils/stac-fastapi-pgstac/blob/main/CHANGES.md#301---2024-11-14

stac-utils/stac-fastapi-pgstac#170

[ianhorn]

Thanks for your response. I updated the image verison for the docker-compose. All the urls work fine still, but now when I open up http://dns:8085 all I see is the title and white page and it's just loading. No console errors or anything. The stac api endpoint still says cors error in radiant earth's stac-browser.

I'm just going to back to using the stac-fastapi-pgstac repo because it was working fine. Maybe I'll try to add the titiler and then stac-browser to that docker-compose.yml.

Thanks again for your help. These are beautiful tools.

[neoporteria]

I'm also having some problems with the local stac-browser. I'm using stac-fastapi-pgstac:4.0.1 with the cors origin and method env vars.

  - CORS_ORIGINS=*
  - CORS_METHODS=GET,POST,OPTIONS

whenever i try to open the catalog in the local browser i got the CORS header message, but if i use localhost:8081 on radiantearth stac-browser i don't have any problem opening it

[ianhorn]

I believe the issue is unrelated to CORS. What I believe is going on is my API url is a domain name, but the links are still getting created as localhost. Stac-browser does does not like the mixing of the two.

Is there somewhere in the docker-compose.yml to set the API url?

API: https://kygislicserv.ky.gov/kystac-api

"links": [
{
"rel": "self",
"type": "application/json",
"href": "http://localhost:8082/"
},
{
"rel": "root",
"type": "application/json",
"href": "http://localhost:8082/"
},
{
"rel": "data",
"type": "application/json",
"href": "http://localhost:8082/collections"
},
{
"rel": "conformance",
"type": "application/json",
"title": "STAC/OGC conformance classes implemented by this server",
"href": "http://localhost:8082/conformance"
},

[Tnecniv-Teikram]

Did anyone managed to get it working?
I had it working before but at some point also started getting the CORS error in my STAC browser.

[alukach]

@Tnecniv-Teikram I can reproduce this, but only when accessing the STAC Browser from http://localhost:8085. Can you try accessing the STAC Browser from http://0.0.0.0:8085 (rather than localhost:8085)? That gets around the CORS issue on my machine.

---

Issue Triage

Issue

When accessing the STAC Browser via localhost:8085, I see a CORS error:

STAC Browser is querying the STAC API at 0.0.0.0:8081, as specified in the STAC Browser config:

eoAPI/dockerfiles/browser_config.js

Line 2 in 8f5fc55

catalogUrl: "http://0.0.0.0:8081",

Which matches how it is served in the docker-compose.yaml:

eoAPI/docker-compose.yml

Line 32 in 8f5fc55

bash -c "bash /tmp/scripts/wait-for-it.sh -t 120 -h database -p 5432 && uvicorn stac_fastapi.pgstac.app:app --host 0.0.0.0 --port 8081"

In stac-utils/stac-fastapi-pgstac#168, we enable CORS by default. This was released in version 3.0.1, and we're using version 5.0.2:

eoAPI/docker-compose.yml

Line 16 in 8f5fc55

image: ghcr.io/stac-utils/stac-fastapi-pgstac:5.0.2

Cause

I believe this comes down to the browser's inclusion/exclusion of the origin header¹ when sending requests to the STAC API.

Our CORS middleware is a subclass of the Starlette CORSMiddleware. It only appends CORS headers if the origin header is provided².

This is pretty easy to test via curl:

▶ curl 'http://localhost:8081/' -H 'Origin: http://0.0.0.0:8085' --verbose --silent > /dev/null
* Host localhost:8081 was resolved.
* IPv6: ::1
* IPv4: 127.0.0.1
*   Trying [::1]:8081...
* connect to ::1 port 8081 from ::1 port 52644 failed: Connection refused
*   Trying 127.0.0.1:8081...
* Connected to localhost (127.0.0.1) port 8081
> GET / HTTP/1.1
> Host: localhost:8081
> User-Agent: curl/8.7.1
> Accept: */*
> Origin: http://0.0.0.0:8085
>
* Request completely sent off
< HTTP/1.1 200 OK
< date: Tue, 22 Apr 2025 16:48:19 GMT
< server: uvicorn
< content-length: 3001
< content-type: application/json
< access-control-allow-origin: *  (<-- CORS Header!)
<
{ [3001 bytes data]
* Connection #0 to host localhost left intact

▶ curl 'http://localhost:8081/' --verbose --silent > /dev/null
* Host localhost:8081 was resolved.
* IPv6: ::1
* IPv4: 127.0.0.1
*   Trying [::1]:8081...
* connect to ::1 port 8081 from ::1 port 52686 failed: Connection refused
*   Trying 127.0.0.1:8081...
* Connected to localhost (127.0.0.1) port 8081
> GET / HTTP/1.1
> Host: localhost:8081
> User-Agent: curl/8.7.1
> Accept: */*
>
* Request completely sent off
< HTTP/1.1 200 OK
< date: Tue, 22 Apr 2025 16:48:27 GMT
< server: uvicorn
< content-length: 3001
< content-type: application/json
<   (<-- No CORS Header :( )
{ [3001 bytes data]
* Connection #0 to host localhost left intact
* 

I honestly don't know why the browser doesn't include the Origin header at times. According to MDN³, the browser should send the Origin header on cross-origin requests, such as this situation. It's important to note that the inclusion of the Origin header is ultimately up to the browser, not the code.

For example, I'm using the Brave browser⁴ and when I disable the Brave Shield (strict security mode), the origin-header is included and the API responds appropriately. When Brave Shield is enabled, the origin-header is not included and the the CORS error occurs.

I think this is likely going to be a "won't/can't fix" on our end. I'm going to go ahead and close this but feel free to push back if you think I've missed anything.

Footnotes

1. https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin ↩

2. https://github.com/encode/starlette/blob/a766a58d14007f07c0b5782fa78cdc370b892796/starlette/middleware/cors.py#L82-L86 ↩

3. https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Origin#description ↩

4. https://brave.com/ ↩