Airflow CORS issue with Angular

[Vishnu05]

Apache Airflow version

2.0.0

Operating System

Ubuntu 18.04.5 LTS

Versions of Apache Airflow Providers

No response

Deployment

Virtualenv installation

Deployment details

No response

What happened

CORS origin could not be enabled with airflow.cfg. We tried to trigger DAGs from Angular UI
Angular version: 12+
Node.js version: 16+

Access to XMLHttpRequest at 'http://airflow.com/api/v1/dags/Samples/dagRuns' from origin 'http://angularui.com:4200' 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.

example:
[API]
access_control_allow_headers = *
access_control_allow_methods = *
access_control_allow_origin = *

We tried following the docs, we restarted the server always. None of them work.

What you expected to happen

We expected to call an Airflow API and trigger DAGs from angular UI. But CORS issue blocked call to the Airflow API.

How to reproduce

1. Create a new angular project.
2. Create a button to make an Airflow API call using HttpClient.
3. Run it in production mode.
4. Click the button to trigger the API call.
5. Check chrome console.

Anything else

No response

Are you willing to submit PR?

• Yes I am willing to submit a PR!

Code of Conduct

• I agree to follow this project's Code of Conduct

[boring-cyborg]

Thanks for opening your first issue here! Be sure to follow the issue template!

[mik-laj]

Support for CORS has been added in Airflow 2.1.0, so it is not available in Airflow 2.0.0. See: #13620

Airflow 2.1.0, 2021-05-21
....

• Configurable API response (CORS) headers (Configurable API response (CORS) headers #13620)

https://github.com/apache/airflow/blob/main/CHANGELOG.txt

[Vishnu05]

@mik-laj Thanks man, After upgrading the airflow to 2.1.0. I'm able to access and trigger airflow API via Angular.

Thank you so much!. It helped and resolved.