N
Nuxt•2mo ago
Hugo

Google Place API

Hi guys, it'm trying to create a google place autocomplete input for my nuxt app. I'm struggling so hard on making it. when i call the api when the user enter keys in the input i got cors error. I'm not sure what i'm supposed to do, in order to keep safe my key too. If someone have some tips i would be grateful. 
<script setup>
import { ref, onMounted, watch } from 'vue'

const config = useRuntimeConfig()
const apiKey = config.public.googleMapAPIKey

const modelValue = ref('')

const fetchData = async (query) => {
  const {data} = await $fetch(`https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api/place/autocomplete/json?input=${query}&key=${apiKey}`, {
    method: 'GET',
  })
  console.log(data);
}

watch(modelValue, (newValue) => {
  if (newValue.length > 3) {
    fetchData(newValue)
  } else {
  }
})
</script>

<template>
  <div>
    <div>
      <input
        v-model="modelValue"
        name="search_location"
        id="search_location"
        placeholder="Recherche une adresse/ville"
      />
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue'

const config = useRuntimeConfig()
const apiKey = config.public.googleMapAPIKey

const modelValue = ref('')

const fetchData = async (query) => {
  const {data} = await $fetch(`https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api/place/autocomplete/json?input=${query}&key=${apiKey}`, {
    method: 'GET',
  })
  console.log(data);
}

watch(modelValue, (newValue) => {
  if (newValue.length > 3) {
    fetchData(newValue)
  } else {
  }
})
</script>

<template>
  <div>
    <div>
      <input
        v-model="modelValue"
        name="search_location"
        id="search_location"
        placeholder="Recherche une adresse/ville"
      />
    </div>
  </div>
</template>
5 Replies
kapa.ai
kapa.ai•2mo ago
Hi @Hugo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can offer some guidance on your issue with the Google Place API in your Nuxt app. The CORS error you're encountering is a common problem when making requests to third-party APIs from the client-side. Here are some suggestions to address your issue: 1. Server-side API calls: Instead of making the API call directly from the client-side, you should make the request from the server-side. This approach will help you avoid CORS issues and keep your API key secure. As mentioned in this Stack Overflow answer (https://stackoverflow.com/questions/77022535), you should "Try fetching the API from postman, if it works just put the fetch call in the server-side backend." 2. Use a server route: Create a server route in your Nuxt app to proxy the request to the Google Places API. This way, you can keep your API key on the server and avoid exposing it to the client. 3. Utilize useRuntimeConfig: You're already using useRuntimeConfig to access your API key, which is good. Make sure your API key is properly set in your nuxt.config.ts file. Here's an example of how to set it up: 
   export default defineNuxtConfig({
     runtimeConfig: {
       // Private keys are only available on the server
       googleMapAPIKey: process.env.GOOGLE_MAP_API_KEY,
       // Public keys that are exposed to the client
       public: {
         googleMapAPIKey: process.env.NUXT_PUBLIC_GOOGLE_MAP_API_KEY
       }
     }
   })
   
   export default defineNuxtConfig({
     runtimeConfig: {
       // Private keys are only available on the server
       googleMapAPIKey: process.env.GOOGLE_MAP_API_KEY,
       // Public keys that are exposed to the client
       public: {
         googleMapAPIKey: process.env.NUXT_PUBLIC_GOOGLE_MAP_API_KEY
       }
     }
   })
Source: Nuxt Documentation (https://nuxt.com/docs/api/composables/use-runtime-config) 4. Create a server API endpoint: Instead of calling the Google API directly from your component, create a server API endpoint in your Nuxt app. For example: 
   // server/api/places.ts
   export default defineEventHandler(async (event) => {
     const config = useRuntimeConfig(event)
     const query = getQuery(event)
     const response = await $fetch(`<https://maps.googleapis.com/maps/api/place/autocomplete/json?input=${query.input}&key=${config.googleMapAPIKey}`>)
     return response
   })
   
   // server/api/places.ts
   export default defineEventHandler(async (event) => {
     const config = useRuntimeConfig(event)
     const query = getQuery(event)
     const response = await $fetch(`<https://maps.googleapis.com/maps/api/place/autocomplete/json?input=${query.input}&key=${config.googleMapAPIKey}`>)
     return response
   })
Then, in your component, you can call this endpoint instead: 
   const fetchData = async (query) => {
     const { data } = await useFetch(`/api/places?input=${query}`)
     console.log(data.value)
   }
   
   const fetchData = async (query) => {
     const { data } = await useFetch(`/api/places?input=${query}`)
     console.log(data.value)
   }
By implementing these changes, you should be able to resolve the CORS issue and keep your API key secure. Remember to always keep sensitive information like API keys on the server-side and never expose them to the client. Nuxt Documentation (https://nuxt.com/docs/guide/going-further/runtime-config) provides more information on runtime config and how to properly manage environment variables in your Nuxt application. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@122807566475591680> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Hugo
HugoOP•2mo ago
@kapa.ai I can't make google place api calls on localhost server. The call have to be client side.
kapa.ai
kapa.ai•2mo ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand you're having difficulties making Google Place API calls on your localhost server and that the calls need to be client-side. However, it's important to note that making API calls directly from the client-side can expose your API key and may not be the most secure approach. That being said, if you must make the calls client-side, here are some suggestions based on the provided knowledge sources: 1. CORS issues: The CORS (Cross-Origin Resource Sharing) error you're encountering is likely because the Google Places API doesn't allow direct requests from browsers for security reasons. To work around this during development, you can try using a CORS proxy. However, be aware that this is not a recommended solution for production environments. 2. Use useFetch or useAsyncData: Instead of using $fetch directly, consider using Nuxt's useFetch or useAsyncData composables. These are designed to work with Nuxt's SSR capabilities and can help manage state between server and client. Here's an example using useFetch: 
   const { data, pending, error, refresh } = await useFetch(`<https://maps.googleapis.com/maps/api/place/autocomplete/json`,> {
     params: {
       input: query,
       key: apiKey
     }
   })
   
   const { data, pending, error, refresh } = await useFetch(`<https://maps.googleapis.com/maps/api/place/autocomplete/json`,> {
     params: {
       input: query,
       key: apiKey
     }
   })
Source: Nuxt Documentation (https://nuxt.com/docs/getting-started/data-fetching) 3. Handle CORS in development: For development purposes, you can modify your Nuxt configuration to proxy requests to the Google API. Add the following to your nuxt.config.ts: 
   export default defineNuxtConfig({
     // ... other config
     vite: {
       server: {
         proxy: {
           '/google-api': {
             target: '<https://maps.googleapis.com',>
             changeOrigin: true,
             rewrite: (path) => path.replace(/^\/google-api/, '')
           }
         }
       }
     }
   })
   
   export default defineNuxtConfig({
     // ... other config
     vite: {
       server: {
         proxy: {
           '/google-api': {
             target: '<https://maps.googleapis.com',>
             changeOrigin: true,
             rewrite: (path) => path.replace(/^\/google-api/, '')
           }
         }
       }
     }
   })
Then, in your component, you can make requests to /google-api/... instead of the full Google API URL. 4. Use useRequestFetch: If you need to forward headers from the client to the API, you can use useRequestFetch. This might help with some CORS issues: 
   const requestFetch = useRequestFetch()
   const { data } = await useAsyncData(() => 
     requestFetch('/google-api/maps/api/place/autocomplete/json', {
       params: { input: query, key: apiKey }
     })
   )
   
   const requestFetch = useRequestFetch()
   const { data } = await useAsyncData(() => 
     requestFetch('/google-api/maps/api/place/autocomplete/json', {
       params: { input: query, key: apiKey }
     })
   )
Source: Nuxt Documentation (https://nuxt.com/docs/api/composables/use-request-fetch) Remember, while these solutions might work for development on localhost, they are not recommended for production use. For a production environment, it's strongly advised to handle API calls server-side to protect your API key and avoid CORS issues. If you continue to face issues, you might need to look into setting up a proper backend service to handle these API calls securely, or consider using Google Maps JavaScript API with client-side libraries, which are designed for browser use. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@122807566475591680> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?