Vue2:axios解决跨域的问题(vue2没有config情况下)
axios代理转发(vue2,无config文件夹的情况)
·
在vue2上用axios发起Post模拟注册的时候,调用接口,提示报错:
axios({
method: 'post',
url: 'http://1.12.254.80:8080/api/user/register',
// url: '/user/api/user/register',
data: { // 请求体数据
userAccount: userName,
userPassword: pwd1,
checkPassword: pwd2
}
}).then(res => {
if (res.data === -1) {
alert('注册失败,用户名被占用啦')
} else {
console.log('注册成功')
alert('注册成功!您可以登录啦')
}
})
接口:http://1.12.254.80:8080/api/user/register
方式:POST
数据:用户名、密码、确认密码
点击注册按钮,发起POST请求以后发生错误,一个跨域的问题
这个时候在前端身上解决跨域的问题即可
这里我创建的vue2项目是没有config文件夹的,也就不能修改到里面的index文件,所以手动配置
1、找到vue文件夹下的vue.config.js文件
如果没有该文件,就手动在根目录上创建一个
复制代码
module.exports = {
// 开发服务器
devServer: {
port: 8082, // 修改启动端口号
proxy: {
'/user': { // 请求相对路径以 /user 开头的,才会走这里的配置
target: 'http://1.12.254.80:8080', // 这个就是后端地址
changeOrigin: true,
pathRewrite: {
'^/user': ''
}
}
}
},
publicPath: './'
}
个人提示:
1、这里的端口号可以修改一下,默认的vue项目启动都是8080,我这里的Api端口号就冲突了,代理后就给我报404..(不知道是不是这个的问题,在没改端口之前请求都失败了,该端口后就成功了)
2、在axios上修改url地址
axios({
method: 'post',
url: 'user/api/user/register',
data: { // 请求体数据
userAccount: userName,
userPassword: pwd1,
checkPassword: pwd2
}
})
axios方法中的url参数是配置代理以后的
3、测试
成功辣
更多推荐
已为社区贡献3条内容
所有评论(0)