CODEWITHSUNDEEP
vue.jswebpackproxyaxiosvue-cli-3
Anin Huang
Anin Huang

Reputation: 51

Vue CLI 3 with Axios - Proxy Server is not working

I have a VueCLI frontend application running on http://localhost:8080 in the development mode. I attempted to call api services offered by http://localhost:36856, so there would be a CORS problem. Then I set up proxy server configuration in vue.config.js but it's not working. Here are some code below...

// vue.config.js
module.exports = {
  devServer: {
    proxy: 'http://localhost:36856',
  }
}

I create a new instance of axios with a custom config in Api.js

// Api.js
import axios from 'axios'

export default (baseURL = process.env.VUE_APP_DATA_SERVICE_URL) => {
    return axios.create({
        baseURL: baseURL,
        withCredentials: false,
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
    })
}

// .env.development
VUE_APP_DATA_SERVICE_URL=http://localhost:36856

This is an example how I built an api service which is ready to be called

// UserService.js
import apiClient from './Api'

export default {
    getUser (initial) {
        return apiClient().get(`/api/users/${initial}`)
    },
}

Upvotes: 2

Views: 3832

Answers (1)

Dr Fred
Dr Fred

Reputation: 989

As you have already proxied your API service, your VUE_APP_DATA_SERVICE_URL should be set to your Vue server :

// .env.development
VUE_APP_DATA_SERVICE_URL = http://localhost:8080

Upvotes: 2

Related Questions