XMLHttpRequest has been blocked by CORS. SteamAPI axios from localhost

Question

I'm trying to use steam API in my project and when i use axios i catch this error:

here axios code:

axios.get('http://api.steampowered.com/IPlayerService/GetOwnedGames/v0001/', {
            headers: {
                'Content-Type': 'application/json',
                'Access-Control-Allow-Origin': 'http://localhost:3000'
            },
            params: {
                key: 'mysteamCODE',
                steamid: '76561197960434622',
                format: 'json'
            }
        }).then(res => {
            console.log(res);
        })

i'm also trying to: {'Access-Control-Allow-Origin': '*'}, same error.

Answer 1

Looks like you are trying to make a HTTP request from browser directly to Steam API - this will not work.

The header you are using (Access-Control-Allow-Origin) needs to be provided by server to client and based on that, the client (in this case your web browser) will decide whether it will allow the request or not.

Web browsers do not allow cross-origin requests by default, unless the server provides correct CORS headers. This is a security feature.

To make this work, you would need to send a request from your web browser to your web server (in your case localhost:3000), this server would then request the data from Steam API and only then send the data back to client. This is how CORS proxies work.