[Vuejs]-Fetch not receiving headers JS from Flask send_file()

by

0👍

✅

Research

In the interest of logging the solution I found and helping out anyone in the future who may be interested in knowing the answer here’s what I discovered:

  1. There is a restriction to access response headers when you are using Fetch API over CORS.

    https://stackoverflow.com/a/44816592/20342081

    So, no matter what using the JS fetch-api you will be unable to access all headers (outside of Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, and Pragma) unless you expose them by specifying them in a request header. That would look something like this:

    fetch('https://myrequest/requestend/', {
    headers: {
        'Access-Control-Expose-Headers': 'Content-Disposition'
    }
})

  2. When a cross-origin source accesses your API you will have to expose the header from the back end as well. https://stackoverflow.com/a/66291644/20342081

I was also confused about how the differences between Access-Control-Expose-Headers and Access-Control-Allow-Headers. In my case the solution was use "expose headers" on both the frontend and the backend (and allow wouldn’t work). However, Allow has its own applications which I have yet to understand fully. For those endeavoring check out: https://stackoverflow.com/a/28108431/20342081

Solution

I implemented these things in my code by doing:

class RequestResult(Resource):
    def get(self, index):
        base_path = f"Requests/{index}/"
        filename = os.listdir(base_path)[0]

        response = make_response(send_file(base_path + filename, as_attachment=True, download_name=filename))
        response.headers['Access-Control-Expose-Headers'] = "Content-Disposition"

        return response

And on the front end exposing the header as well on the fetch request:

fetch('http://localhost:4999/rdownload/' + this.$route.params.id, {
    method: 'GET',
    mode: 'cors',
    headers: {
        'Access-Control-Expose-Headers': 'Content-Disposition'
    }
})

I hope this is helpful for the next 5 people who open this in the next 10 years!

Leave a comment