Vue-cli uses axios to initiate a http request. Why is the requested URL incorrect?

configured in config/index.js

proxyTable: {
     target: "http://www.vuetpadmin.com/",
     changeOrigin: true,
     secure: false
 },
 methods:{
        target(){
            this.$http({
              method: "get",
              url: "admin/index/login.html",
              data: {
                name: "virus"
              }
           })
        } 
    },

Why is the http request http://localhost:8080/admin/index/login.html (vue"s access domain name IP) instead of
http://www.vuetpadmin.com/adm.

?
Feb.20,2022

proxyTable: {
    '/api': {
      target: 'http://www.vuetpadmin.com/',
      changeOrigin: true, //
      secure: false
    }

this means
' http://localhost:8080/api' = >' http://www.abc.com/api'

if forwarded by the agent, the request is still sent to the local machine in network

.

you can modify it like this

proxyTable: {
    '/admin': {
      target: 'http://www.vuetpadmin.com/',
      changeOrigin: true, //
      secure: false
    }
    
     methods:{
        target(){
            this.$http({
              method: 'get',
              url: '/admin/index/login.html',
              data: {
                name: 'virus'
              }
           })
        } 
    },

personally, it is not recommended that you send a request in this way. I hope you can read on, a relatively simple

you should be like this.

A method axios.js that separately encapsulates an axios request contains the post,get,fromdate request method.

// axios.js 
import axios from 'axios';
import Cookies from 'js-cookie';

axios.defaults.timeout = 9999999;
axios.defaults.baseURL ='';


//http request 
axios.interceptors.request.use(
  config => {
    let token = Cookies.get('token'); //cookiejs-cookie
    
    if(config.method=='post'){ // post token
        config.data = config.data;
        if(token){
          config.data.token = token
        } 
        // else {
        //   console.log('token')
        // }
        config.headers = {
        'Content-Type':'application/x-www-form-urlencoded',
        }
    } else if(config.method=='get'){ // get url
        config.params.token = token
        config.headers = {
            'Content-Type':'application/x-www-form-urlencoded',
        }
    }
    return config;
  },
  error => {
    return Promise.reject(err);
  }
);


//http response 
axios.interceptors.response.use(
    // token 
  response => {
    if(response.data.errCode ==2){
      router.push({
        path:"/login",
        querry:{redirect:router.currentRoute.fullPath}//
      })
    }
    return response;
  },
  error => {
    return Promise.reject(error)
  }
)


/**
 * get
 * @param url
 * @param data
 * @returns {Promise}
 */
export function get(url,params={}){
  return new Promise((resolve,reject) => {
    axios({
        url: url,
        method: 'GET',
        params: params,
        transformRequest: [function (data) {
          let ret = ''
          for (let it in data) {
            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
          }
          return ret
        }],
        })
        .then(res => {
            if(res.data.code == 1001){
                this.$Message.warning(',' + res.data.message);
                this.$router.push({path:'/'})
                return
            }
            resolve(res.data);
        })
        .catch(err => {
            reject(err)
        })
  })
}


/**
 * post
 * @param url
 * @param data
 * @returns {Promise}
 */
 export function post(url,data = {}){
   return new Promise((resolve,reject) => {
        axios({
        url: url,
        method: 'POST',
        data: data,
        transformRequest: [function (data) {
          let ret = ''
          for (let it in data) {
            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
          }
          return ret
        }],
        })
        .then(res => {
            if(res.data.code == 1001){
                this.$Message.warning('' + res.data.message);
                this.$router.push({path:'/'})
                return
            }
            resolve(res.data);
        })
        .catch(err => {
            reject(err)
        })
   })
 }

 /**
  * from 
  */
 export function get_from(URL, PARAMS) {
  var p = new Promise((resolve, reject) =>{        //
    var temp = document.createElement("form");
    temp.action = URL;
    temp.method = "get";
    temp.style.display = "none";
    for (var x in PARAMS) {
      var opt = document.createElement("textarea");
      opt.name = x;
      opt.value = PARAMS[x];
      temp.appendChild(opt);
    }
    document.body.appendChild(temp);
    temp.submit();
    this.$Loading.finish();
    resolve(temp) 
  });
  return p;
}

/**
 *  excel
 */

export function up_excel(URL, PARAMS) {
  return new Promise((resolve,reject) => {
    let token = this.$Cookies.get('token')
    let config = {
        headers: {
        'Content-Type': 'multipart/form-data'
        }
    }
    PARAMS.append('token', token)

    axios.post(URL, PARAMS, config)
      .then( res => {
        resolve(res.data)
      })
      .catch(err=>{
        reject(err)
      })
  })
}

then expose the methods in axios.js in main.vue. Then register globally for use (as below)

import {post,get,get_from,up_excel} from './api/axios'
Vue.prototype.$get=get;
Vue.prototype.$get_from = get_from;
Vue.prototype.$up_excel = up_excel;

at this point, you can use it again in the component. The methods used are as follows

// url:   data:
this.$post(url,data)
    .then(res=>{
        if(res.code == 200){
            // 
        } else {
            // 
        }
    })
    
 this.$get(url,data)
    .then(res=>{
        if(res.code == 200){
            // 
        } else {
            // 
        }
    })
   

ps: I personally like to put the whole interface in a file like this linkUrl.js

let main = ''

const linkurl = {
    login : main + '/login/login',
}

export default linkurl

then register globally

import linkurl from './api/LinkUrl'

Vue.prototype.$linkurl = linkurl

at this time, you can use this directly in the encapsulated request

this.$post(this.$linkurl.login, data)  // this.$linkurl.loginjs
    .then(res=>{
        if(res.code == 200){
            // 
        } else {
            // 
        }
    })
    

that's fine


axios's url initiates a request to the native localhost by default when does not write the http prefix . Even if a proxy is set up in the development mode, the Network of the browser also shows that you initiate a request to the local machine, but the result of is indeed a proxy .
because the request initiated by the front end is indeed not cross-domain, the function of the proxy is the service implementation of vue-cli

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3553a-4ebec.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3553a-4ebec.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?