CORS policy issue in React and fetch

June 16, 2023

Im trying to fetch data from external api using fetch in react typescript component and having the error:

Access to fetch at ‘https://api.airtable.com/{my_data_base}’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: Request header field authentication is not allowed by Access-Control-Allow-Headers in preflight response.

My React tsx component is:

import { FC, useEffect } from 'react';

const Collection: FC = () => {
    useEffect(() => {
        fetch('https://api.airtable.com/v0/my_data_base', {
            headers: {
                mode: 'no-cors',
                Authentication: 'Bearer my_token',
            },
        })
            .then((resp) => resp.json())
            .then((data) => {
                console.log(data);
            });
    }, []);

    return <div>Collection Page Component</div>;
};

export default Collection

The same logic works fine with other apis, that don’t require authorisation, like for example https://jsonplaceholder.typicode.com/todos/1

Any idea how to fix it?
I’ve tried even the most stupid solution which is browser extensions but non of them worked.

>Solution :

First, the mode property is not part of the headers object but it belongs to the entier options object just like herders, second you don’t need it.
Also the property for passing tokens is Authorization not Authentication.