CODEWITHSUNDEEP
node.jsvue.jsaxios
user762579
user762579

Reputation:

Vue.js Node.js Axios.js Does not work as expected in documentation

env : axios 0.16.2. node 4.0.8

A simple get is raising an error when I use:

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

but it runs well if I only use a full url

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}

Upvotes: 0

Views: 429

Answers (2)

user762579
user762579

Reputation:

Issue resolved ! I discovered the issue looking into :

1/ how axios was sending the request

 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/ how axios-mock-adapter was handling the request

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);
  }
  ...
}

it's related to the axils-mock-adapter ( used in tests) in which I must used the passed url ( not the baseURL + url)

in my api/index.js

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

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

and in my test spec.js

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

Upvotes: 0

Pat
Pat

Reputation: 2750

A simple get is raising an error when I use:

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

but it runs well if I only use a full url

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

Have you tried removing the trailing / from your baseURL? e.g. http://localhost:3000/api

I would assume its trying http://localhost:3000/api/ + /shoppinglists/s = http://localhost:3000/api//shoppinglists

Upvotes: 1

Related Questions