[Vuejs]-Axios VueJS and open API

Several issues:

1. The Access-Control-Allow-Origin header has no place in your request, since it’s a response header.
2. You cannot use the no-cors mode if you want your client to have access to the response. You’ll have to use the cors mode (which is the default for cross-origin requests).
3. Because the resource in question doesn’t seems to allow any request headers other than CORS-safelisted request headers, you won’t be able to include a Content-Type header in your request. But note that the request in question is a GET, for which it makes no sense to include a Content-Type header, since GET requests are not meant to have a body. Just drop that header from your request.

If you solve all three issues, it should work.

You don’t necessary to set cors option

I will shows two options by axios call.
Both makes same result

Option 1 : using create()

const axios = require("axios")

const token ='<your token>'
const api = axios.create({baseURL: `https://trefle.io/api/v1/plants/?token=${token}`});

try {
    api.get().then((results) => {
        for (plant of results.data.data) { 
            console.log(JSON.stringify(plant))
        }
    })
} catch (error) {
    console.log(error)
}

Option 2 : no create()

const axios = require("axios")

const getPlants = async () => {
    try {
        const token ='<your token>'
        const response = await axios.get(`https://trefle.io/api/v1/plants?token=${token}`);
        return Promise.resolve(response.data);
    } catch (error) {
        return Promise.reject(error);
    }
}

getPlants()
    .then(plants => {
        for (plant of plants.data) { 
            console.log(JSON.stringify(plant))
        }
}).catch(error => console.log(error));

Result 1

$ node get-option1.js
{"id":77116,"common_name":"Evergreen oak","slug":"quercus-rotundifolia","scientific_name":"Quercus rotundifolia","year":1785,"bibliography":"Encycl. 1: 723 (1785)","author":"Lam.","status":"accepted","rank":"species","family_common_name":null,"genus_id":3519,"image_url":"https://d2seqvvyy3b8p2.cloudfront.net/40ab8e7cdddbe3e78a581b84efa4e893.jpg","synonyms":["Quercus ilex var. oleoides","Quercus ilex subvar. rotundifolia","Quercus ilex f. macrophylla","Quercus ilex f. oleoides","Quercus ilex var. calicina","Quercus ilex subsp. rotundifolia","Quercus lyauteyi","Quercus ballota var. rotundifolia","Quercus ilex f. brevicupulata","Quercus ilex subvar. major","Quercus ilex var. pendula","Quercus rotundifolia f. dolichocalyx","Quercus calicina","Quercus rotundifolia f. pilosella","Quercus rotundifolia f. macrocarpa","Quercus ilex var. rotundifolia","Quercus sugaro","Quercus ilex subvar. pendula","Quercus ilex f. pendula","Quercus ilex f. ballota","Quercus ilex f. rotundifolia","Quercus ilex subvar. minor","Quercus ballota","Quercus ilex var. ballota","Quercus ilex f. calicina","Quercus ilex var. microcarpa","Quercus rotundifolia f. calicina","Quercus ilex f. macrocarpa","Quercus rotundifolia f. brevicupulata","Quercus rotundifolia var. macrocarpa","Quercus ilex var. brevicupulata","Quercus ilex subsp. ballota","Quercus ilex var. dolichocalyx","Quercus rotundifolia var. pilosella","Quercus rotundifolia var. brevicupulata","Quercus rotundifolia subsp. maghrebiana"],"genus":"Quercus","family":"Fagaceae","links":{"self":"/api/v1/species/quercus-rotundifolia","plant":"/api/v1/plants/quercus-rotundifolia","genus":"/api/v1/genus/quercus"}}

... cut off

Result 2

$ node get-option2.js
{"id":77116,"common_name":"Evergreen oak","slug":"quercus-rotundifolia","scientific_name":"Quercus rotundifolia","year":1785,"bibliography":"Encycl. 1: 723 (1785)","author":"Lam.","status":"accepted","rank":"species","family_common_name":null,"genus_id":3519,"image_url":"https://d2seqvvyy3b8p2.cloudfront.net/40ab8e7cdddbe3e78a581b84efa4e893.jpg","synonyms":["Quercus ilex var. oleoides","Quercus ilex subvar. rotundifolia","Quercus ilex f. macrophylla","Quercus ilex f. oleoides","Quercus ilex var. calicina","Quercus ilex subsp. rotundifolia","Quercus lyauteyi","Quercus ballota var. rotundifolia","Quercus ilex f. brevicupulata","Quercus ilex subvar. major","Quercus ilex var. pendula","Quercus rotundifolia f. dolichocalyx","Quercus calicina","Quercus rotundifolia f. pilosella","Quercus rotundifolia f. macrocarpa","Quercus ilex var. rotundifolia","Quercus sugaro","Quercus ilex subvar. pendula","Quercus ilex f. pendula","Quercus ilex f. ballota","Quercus ilex f. rotundifolia","Quercus ilex subvar. minor","Quercus ballota","Quercus ilex var. ballota","Quercus ilex f. calicina","Quercus ilex var. microcarpa","Quercus rotundifolia f. calicina","Quercus ilex f. macrocarpa","Quercus rotundifolia f. brevicupulata","Quercus rotundifolia var. macrocarpa","Quercus ilex var. brevicupulata","Quercus ilex subsp. ballota","Quercus ilex var. dolichocalyx","Quercus rotundifolia var. pilosella","Quercus rotundifolia var. brevicupulata","Quercus rotundifolia subsp. maghrebiana"],"genus":"Quercus","family":"Fagaceae","links":{"self":"/api/v1/species/quercus-rotundifolia","plant":"/api/v1/plants/quercus-rotundifolia","genus":"/api/v1/genus/quercus"}}
... cut off

Is someone could take a time to explain me why my code does not work ?

const axiosInstance = axios.create({
    baseURL : `https://trefle.io/api/v1/plants?token=${token}`,
})

actions:{
        async getPlantsList(context)
        {
            try{
                console.log(axiosInstance);        
                const response = await axiosInstance.get();

                console.log('2', response.data);
                context.commit();

            } catch(error){
                console.log('error', error);
            }
        }

Answer

With Vuejs 3

On vite.config.js file in root.

You have to add this code

server:{
  proxy:{
    '/api':{
      target: 'https://trefle.io',
      changeOrigin: true
    }
  }

https://vitejs.dev/config/server-options.html

Thanks for helping me