vue的脚手架2和3中解决跨域
在src文件里建立api文件夹里有两个文件
- ajax.js
- index.js
ajax.js
// 是对axios请求做了一个封装
import axios from 'axios';
export default function ajax(url, data={},method='GET'){
return new Promise((resolve, reject) => {
let promise
if(method==='GET'){
promise=axios.get(url, {params: data})
}else{
promise=axios.post(url, data)
}
promise.then(
response => {
resolve(response.data)
},
error => {
alert('请求异常:' + error.message)
}
)
})
}
//index.js
import ajax from './ajax.js';
const BASE='/api'
export const reqAddress= (longitude,latitude) => ajax(BASE + `/position/${latitude},${longitude}`)
export const reqCategory= () => ajax(BASE + `/index_category`)
export const reqShops= (longitude,latitude) => ajax(BASE + `/shops?`,{latitude,longitude})
脚手架2中在config–》index.js的proxyTable属性中设置
proxyTable: {
'/api':{ //匹配所有以'/api'开头的请求路径
target:'http://localhost:5000', //代理目标的基础路径
changeOrigin: true,//支持跨域
pathRewrite: { //重写路径:去掉路径中开头的'/api'
'^/api': ''
}
}
},
脚手架3中在根目录新建文件vue.config.js文件的proxyTable属性中设置
module.exports={
devServer: {
proxy: {
'/api':{ //匹配所有以'/api'开头的请求路径
target:'http://localhost:5000', //代理目标的基础路径
changeOrigin: true,//支持跨域
pathRewrite: { //重写路径:去掉路径中开头的'/api'
'^/api': ''
}
}
},
}
}