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