# How to (actually) configure CORS for preflight requests?

**URL:** <https://community.traefik.io/t/how-to-actually-configure-cors-for-preflight-requests/16857>\
**Category:** Traefik v2\
**Tags:** docker\
**Created:** [December 18, 2022, 5:33am UTC](https://community.traefik.io/t/how-to-actually-configure-cors-for-preflight-requests/16857 "2022-12-18T05:33:01Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![mshajarrazip](https://avatars.discourse-cdn.com/v4/letter/m/bc79bd/32.png) [@mshajarrazip](https://community.traefik.io/u/mshajarrazip)\
**Post date:** [December 18, 2022, 5:33am UTC](https://community.traefik.io/t/how-to-actually-configure-cors-for-preflight-requests/16857/1 "2022-12-18T05:33:01Z")

</div>

I've been at this for five days now ... can I have a configuration that just works?

My setup is a FastAPI + Traefik + Docker setup - a super simple setup that you can run on your own machine like so: [https://github.com/mshajarrazip/fastapi-traefik-docker-cors](https://github.com/mshajarrazip/fastapi-traefik-docker-cors). It doesn't even have TLS/SSL configured.

The issue is not with FastAPI - the CORSMiddleware module is working fine there. I got no CORS errors when making API calls without traefik as the proxy.

This is my docker-compose.yml file (am I doing something wrong with the labels?):

```auto
version: '3.8'

services:
  reverse-proxy:
    image: traefik:v2.9
    ports:
      - ${API_PORT}:80
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
      - ./traefik.yml:/etc/traefik/traefik.yml

  api:
    build:
      context: ./api
      dockerfile: Dockerfile
    expose:
      - 88
    labels: # new
      - "traefik.enable=true"
      - "traefik.http.routers.to_api.rule=Host(`basic.api`)"
      - "traefik.http.routers.to_api.middlewares=cors"
      - "traefik.http.middlewares.cors.headers.accesscontrolallowmethods=*"
      - "traefik.http.middlewares.cors.headers.accesscontrolalloworiginlist=*"
      - "traefik.http.middlewares.cors.headers.accesscontrolmaxage=300"
      - "traefik.http.middlewares.cors.headers.addvaryheader=true"

```

I have a simple fetch call from an html file like this:

```auto
<html>
    <Button id="btnAddData" onclick="AddData();"> Add Data </Button>
</html>

<script>
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append("Host", "basic.api");

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  redirect: 'follow'
};

function AddData(){
  console.log("click");

  fetch("http://172.16.239.132:81/add", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));
}
</script>

```

I got this error on the browser when I run the app behind a traefik proxy:

```auto
index.html:1 Access to fetch at 'http://172.16.239.132:81/add' from origin 'null' 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.

```

Curl and Postman works just fine:

```auto
curl -X 'POST' http://172.16.239.132:81/add -H 'Host: basic.api'

```

I am at my wit's end. I think this should be simple but maybe I'm bad at reading documentations but I can't find the solution anywhere ☹ I was excited about using traefik in my company but this has become a major major major hurdle.

I'm convinced that this is not a FastAPI problem, so regardless of the framework used, the issue is at the traefik service itself. How did you guys make your setup work? Please share a super simple configuration that just works (for any origin, any methods) here. Thank you so much ☹

---

<div class="post-metadata">

**Author:** ![bluepuma77](https://avatars.discourse-cdn.com/v4/letter/b/a9adbd/32.png) [@bluepuma77](https://community.traefik.io/u/bluepuma77)\
**Post date:** [December 18, 2022, 9:35pm UTC](https://community.traefik.io/t/how-to-actually-configure-cors-for-preflight-requests/16857/2 "2022-12-18T21:35:35Z")

</div>

Only a browser is restricting according to CORS, `curl` does not care. Use `curl -v` and check your browser's developer tools' network tab for headers sent from Traefik.

And some info from [stackoverflow](https://stackoverflow.com/questions/8456538/origin-null-is-not-allowed-by-access-control-allow-origin):

> Origin `null` is the local file system, so that suggests that you're loading the HTML page that does the `load` call via a `file:///` URL (e.g., just double-clicking it in a local file browser or similar).
> 
> Most browsers apply the [Same Origin Policy](http://en.wikipedia.org/wiki/Same_origin_policy) to local files by disallowing even loading files from the same directory as the document. (It used to be that Firefox allowed the same directory and subdirectories, but [not any longer](https://www.mozilla.org/en-US/security/advisories/mfsa2019-21/#CVE-2019-11730).
> 
> Basically, using ajax with local resources doesn't work.

---

<div class="post-metadata">

**Author:** ![mshajarrazip](https://avatars.discourse-cdn.com/v4/letter/m/bc79bd/32.png) [@mshajarrazip](https://community.traefik.io/u/mshajarrazip)\
**Post date:** [December 19, 2022, 2:18pm UTC](https://community.traefik.io/t/how-to-actually-configure-cors-for-preflight-requests/16857/3 "2022-12-19T14:18:13Z")

</div>

Hi bluepuma77! Thank you for the reply!

So I ended up putting my file on a server, but the fetch call still didn't went through.

And somehow as I was tweaking my rules, which was originally this:

```auto
- "traefik.http.routers.to_nac.rule=Host(`basic.api`) && PathPrefix(`/nac/`)"

```

And I changed it to this:

```auto
- "traefik.http.routers.to_nac.rule=Host(`nac.ml.api`) || PathPrefix(`/nac/`)"

```

It finally went through! D: I think I missed something about using || and && in the rules? Or is this a bug ...

Anyhow, if your services already applies CORS middleware, probably should do nothing on traefik side. Perhaps the problem is not a failing middleware, but something with how the rules are set up.