0

is anyone getting acquainted with the RAWG video game platform API ?

error: Access to XMLHttpRequest at 'https://api.rawg.io/api/platforms?key=YOUR_API_KEY' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.*

I searched on the Internet, the problem for those who use react is that they call in the hook

useEffect(() => {
    fetchAndStoreData();
  });

without [ ] which leads to an endless launch of requests to the RAWG API and the limit of 2000 requests ends almost instantly and the server disables access. So in the case of a react, it is correct to call the function in the hook with [ ] something like this

useEffect(() => {...}, []);

can i have this problem in vue3 ? if so, how to fix it? or is it something else? i thank you

my code

actions: {
    async fetchGames() {
        const options = {
            method: 'GET',
            url: 'https://api.rawg.io/api/platforms?key=YOUR_API_KEY',
        }
        try {
            const response = await $axios.request(options)
            this.games = response.data.requests
            console.log(this.games)
        } catch (error) {
           console.log(error)
        }
    },
},


onMounted(async () => {
  await $gamesStore.fetchGames()
  games.value = $gamesStore.games
  console.log(games.value)
})
Justin Moreyl
  • 109
  • 1
  • 9
  • 1
    You problem is related to cors, the website you want to access is https://api.rawg.io/api/platforms contains https but you locally have only http so https://api.rawg.io/api/platforms blocks your request – Efros Ionelu Jul 28 '23 at 11:19
  • Efros Ionelu Can you tell me the easiest way to fix this? I've tried a lot and it doesn't work ( – Justin Moreyl Jul 28 '23 at 12:07
  • 1
    You can search there: https://stackoverflow.com/questions/45807049/how-to-run-vue-js-dev-serve-with-https vue.config.js: module.exports = { devServer: { open: process.platform === 'darwin', host: '0.0.0.0', port: 8085, // CHANGE YOUR PORT HERE! https: true, // you need this one hotOnly: false, }, } – Efros Ionelu Jul 28 '23 at 12:20
  • Efros Ionelu do you know how can i do it with nuxt 3? in my nuxt.config.ts ? I can not ( – Justin Moreyl Jul 28 '23 at 13:11

0 Answers0