Vue.js Node.js Axios.js Ne fonctionne pas comme prévu dans la documentation

Question

env: axios 0.16.2. noeud 4.0.8

Un get simple, soulève une erreur lors de l'utilisation:

axios.defaults.baseURL = 'http://localhost:3000/api/' 
url :axios.get('/shoppinglist/s') 

mais il fonctionne bien si j'utilise seulement une URL complète

axios.get('http://localhost:3000/api/shoppinglists/' 

api.index.js

const axios = require('axios') 

const config = { 
    timeout: 1000 
} 

axios.defaults.baseURL = 'http://localhost:3000/api/' 

export default { 

    fetchShoppingLists:() => { 
    return axios.get('/shoppinglists/', config) 
    .catch(error => { 
     console.log('FETCH error: ', error) 
     if (error.response) { 
     console.log('FETCH error.response: ', error.response) 
     } else { 
     console.log('Error', error.message) 
     console.log(error.config) 
     } 
     throw error 
    }) 
    } 
} 

console.log

LOG LOG: 

'FETCH error: ', Error{ 
config: Object{adapter: null, transformRequest: Object{0: ...}, 
transformResponse: Object{0: ...}, 
timeout: 1000, xsrfCookieName: 'XSRF-TOKEN', xsrfHeaderName: 
'X-XSRF-TOKEN', maxContentLength: -1, 
validateStatus: function validateStatus(status) { ... }, 
headers: Object{Accept: ...}, 
baseURL: 'http://localhost:3000/api/', method: 'get', 
url: 'shoppinglists/', 
data: undefined}, 
response: Object{status: 404, config: Object{adapter: ..., transformRequest: ..., transformResponse: ..., timeout: ..., xsrfCookieName: ..., xsrfHeaderName: ..., maxContentLength: ..., validateStatus: ..., headers: ..., baseURL: ..., method: ..., url: ..., data: ...}, data: undefined}} 


'FETCH error.response: ', Object{ 
status: 404, 
config: Object{adapter: null, transformRequest: Object{0: ...}, transformResponse: Object{0: ...}, 
timeout: 1000, xsrfCookieName: 'XSRF-TOKEN', 
xsrfHeaderName: 'X-XSRF-TOKEN', maxContentLength: -1, 
validateStatus: function validateStatus(status) { ... }, 
headers: Object{Accept: ...}, 
baseURL: 'http://localhost:3000/api/', 
method: 'get', 
url: 'shoppinglists/', data: undefined 
}, 

data: undefined} 

Answer 1

Un get simple, soulève une erreur lors de l'utilisation:

axios.defaults.baseURL = 'http://localhost:3000/api/' 
url :axios.get('/shoppinglist/') 

mais il fonctionne bien si j'utilise seulement une URL complète

axios.get('http://localhost:3000/api/shoppinglists/'

Avez-vous essayé de supprimer le / de votre baseU? RL? par exemple. http://localhost:3000/api

Je suppose que son essayer http://localhost:3000/api/ + /shoppinglists/s = http://localhost:3000/api//shoppinglists

Answer 2

Problème résolu! J'ai découvert la question à la recherche dans:

1/comment Axios envoyait la demande

LOG: 'AXIOS DISPATCH REQUEST 51: ', '{"transformRequest":{},"transformResponse":{}," 
timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"headers":{"Accept":"application/json, text/plain, */*"},"baseURL":"http://localhost:3000/", 
"method":"get", 
"url":"http://localhost:3000/shoppinglists"}' 

2/comment-adaptateur Axios-maquette manipulait la demande

function handleRequest(mockAdapter, resolve, reject, config) { 
    if (config.baseURL && config.url.substr(0, config.baseURL.length) === config.baseURL) { 
    config.url = config.url.slice(config.baseURL ? config.baseURL.length : 0); 
    } 
    ... 
} 

il est lié à l'aisselle -mock-adapter (utilisé dans les tests) dans lequel je dois utiliser l'url passé (pas l'URL de base + l'URL)

dans mon api/index.js

axios.defaults.baseURL = 'http://localhost:3000/' 

    fetchShoppingLists:() => { 
    return axios.get('shoppinglists') 
    .catch(error => { 
     throw error 
    }) 
    }, 

et dans mon test spec.js

mock.onGet('shoppinglists').reply(() => { 
    return new Promise((resolve, reject) => {