How to set CORS on Flask API and VUE3?

Question

I have my front end done in Vue3 and using Axios. Accessible from https://front.my_domain.com/auth/login.

The Axios code producing the call is:

call_service(service_name, data = {}, options = {}) {
    const token = localStorage.getItem('s:Token')
    if (token) {
        options.headers = {
            'Authorization': `Bearer ${token}`,
        }
    }
    options.headers = {
        'Access-Control-Allow-Methods': "POST, GET, OPTIONS",
        'Access-Control-Allow-Origin' : '*',
        'Cache-Control' : 'no-store, no-cache, must-revalidate',
        'Content-Type' : 'application/json'
    }

    return this.axios_int.post(service_name, data, options);

The AXIOS request looks like:

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en,es;q=0.9
Access-Control-Request-Headers: access-control-allow-methods,access-control-allow-    origin,cache-control,content-type
Access-Control-Request-Method: POST
Connection: keep-alive
Host: api.base.my_domain.com
Origin: https://base.my_domain.com
Referer: https://base.my_domain.com
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko)         Chrome/111.0.0.0 Safari/537.36

My API is done using Flask. When I use Insomnia to access the methods to the remote URL, all works well and I get the expected responses (2xx, 4xx):

The Flask CORS setup I have is:

CORS(app, origins=['https://front.my_domain.com', 'http://front.my_domain.com],
          allow_headers=["X-API-KEY", "Origin", "X-Requested-With", "Content-Type", "Accept", "Access-Control-Request-Method"], 
          methods=["POST", "GET", "OPTIONS"], 
          supports_credentials=True)

And the request I send from Insomnia:

Date: Sat, 18 Mar 2023 19:03:28 GMT
Server: Apache/2.4.41 (Ubuntu)
Content-Length: 56
Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Origin: *
Cache-Control: no-store, no-cache, must-revalidate
Connection: Keep-Alive
Content-Type: application/json

** Insomnia. Request. Body **

{
  "loginId": "{{ _.user_customer_email }}",
  "password": "{{ _.user_customer_password }}",
  "applicationId": "{{ _.ID_CLIENT }}"
}

** Insomnia. Request. Header **

{
  "Content-Type": "application/json"
}

How to set CORS on Flask API and VUE3?

0 Answers0