Trying to skip pre-flight OPTIONS using JS locally

Question

I'm sending a simple POST request using js fetch, it's being sent to the Bartender Label Software Integration Application but it's unable to handle OPTIONS or the CORS Pre flight sent when using the following code:

<script>
        const TurkishDelightBrownieButton = document.getElementById('Turkish Delight Brownie');
        TurkishDelightBrownieButton.addEventListener('click', function () {
            fetch('http://localhost:8000/brownie', {
                    method: 'POST',
                    headers: {
                        'content-type': 'application/json',
                    },
                    body: {
                        Allergens: 'Egg, Wheat, Soya',
                        Ingredients: "Sugar, Butter, Cream ,stuff like that",
                        Flavour: "Brownie Flavoured",
                        DatePacked: "12/08/2021",
                        BestBefore: "22/08/2021"
                    }
                    })
                    .then(response => {
                        console.log(response)
                    })
                    .catch(err => {
                        console.log(err)
                    })
        });
    </script>

It's all being done locally, so I'm trying to make the request appropriate for the Bartender integration - which is application/json mostly.

If anyone has any suggestions or different ways to do this, I'd love some help!

Answer 1

If I understand the problem correctly, you're running your frontend locally on a port other than 8000 (the port used by your backend). Therefore, the request issued by your frontend to your backend is cross-origin. Moreover, the content type (application/json) specified for your request it a non-simple one.

As a result, the browser will send a preflight request; there's no way around that.