基于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的代理配置已经完成，需要重启服务。
相关链接
发表评论