基于webpack创建的vue项目,自身会有config的配置文件
在开发过程中我们请求数据有时候调用的是第三方接口,此时便会遇到一个问题:跨域限制。一般跨域问题控制台会报这个错:
很多情况下后台会给我们做请求代理,当后台没有帮你的时候只能自己解决了,Vue-cli这里我用的是webpack,那么我们需要在webpack上做代理设置,具体步骤如下:
1. 假设接口地址没有项目名(个人叫法),例如:http://localhost:89/tformDef/query
proxyTable: {
'/': {
target: 'http://localhost:89', // 参数填写被请求的地址
changeOrigin: true, // 如果接口跨域需要配置这个参数
secure: false // 如果是https接口需要配置这个参数
}
}
import axios from 'axios'
export default {
name: 'TabForm',
data() {
return {
message: ''
}
},
mounted() {
this.getData()
},
methods: {
getData() {
axios.post(
'/formDef/query',
{
params: {
taskID: 'Activity_1o3t03u'
}
}
).then(res => {
console.log(res)
}).catch(errMsg => {
console.log(errMsg)
})
}
}
}
这里通过axios请求数据时 路径‘formDef/query’,实际地址是localhost:89/formDef/query
2. 假设接口地址存在项目名(个人叫法),例如:http://localhost:89/tabForm/formDef/query;
整个项目的接口地址都有tabForm
proxyTable: {
'/tabForm': { // '/tabForm'为匹配项
target: 'http://localhost:89', // 参数填写被请求的地址
changeOrigin: true, // 如果接口跨域需要配置这个参数
secure: false // 如果是https接口需要配置这个参数
}
}
import axios from 'axios'
export default {
name: 'TabForm',
data() {
return {
message: ''
}
},
mounted() {
this.getData()
},
methods: {
getData() {
axios.post(
'/formDef/query',
{
params: {
taskID: 'Activity_1o3t03u'
}
}
).then(res => {
console.log(res)
}).catch(errMsg => {
console.log(errMsg)
})
}
}
}
这里通过axios请求数据时 路径‘formDef/query’,实际地址是localhost:89/tabForm/formDef/query
此时webpack的代理配置已经完成,需要重启服务。