Last active
October 8, 2019 15:47
-
-
Save evild70/42f837b67c46a73e376abc2bd24e235f to your computer and use it in GitHub Desktop.
Accessing IGDB.com API v3 with Vue CLI 3/axios using a proxy to avoid CORS issues
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div id="app"></div> | |
</template> | |
<script> | |
import axios from 'axios'; | |
export default { | |
mounted() { | |
axios({ | |
url: "http://localhost:[PORT_NUMBER]/games", | |
method: 'POST', | |
headers: { | |
'Accept': 'application/json', | |
'user-key': '[API_KEY]' | |
}, | |
data: 'fields name; limit 10;' | |
}) | |
.then(response => { | |
console.log(response.data); | |
}) | |
.catch(err => { | |
console.error(err); | |
}); | |
// If you don't want to use axios (it's easier IMHO), | |
// you can use the Fetch API (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) | |
// fetch('http://localhost:[PORT_NUMBER]/games', { | |
// method: 'POST', | |
// headers: { | |
// 'Content-type': 'application/json', | |
// 'user-key': '[API_KEY]', | |
// }, | |
// body: 'fields name; limit 10;' | |
// }).then(response => { | |
// return response.json(); | |
// }).then(data => { | |
// console.log(data); | |
// }).catch(err => { | |
// console.error(err); | |
// }); | |
} | |
} | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// You'll need to create this file in the root of the project (outside `src` directory) | |
// Vue CLI uses http-proxy-middleware (https://github.com/chimurai/http-proxy-middleware#options) | |
// These are the options that worked for me. YMMV. | |
module.exports = { | |
devServer: { | |
proxy: { | |
'^/': { | |
target: 'https://api-v3.igdb.com/', | |
ws: false, | |
changeOrigin: true | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment