前言：在大多数项目开发中，都是采用前后端分离架构，在此情况下都采用一些成熟的框架，类似于ruoyi，因为成熟所以前端的请求都进行了各种封装，有时想单独发起一个简单的请求，还有点麻烦，因此记录一下。文章来源：https://www.toymoban.com/news/detail-624748.html
// 在xxx.vue文件中引入
import axios from 'axios'
// 在methods 对象中使用
methods: {
goToUrl: function() {
axios({
method: "post",
url: 'http://localhost:81/geecg-api/jeecg-boot/sys/phoneLogin',
headers: {
"Content-Type": "application/json"
},
data: {
"mobile":"18012124548",
"captcha": "234"
},
}).then(function (response) {
console.log("111111111111")
console.log(response);
if (response.data.code ==200){
window.open("http://localhost:3000", '_blank');
}
}).catch(function (error) {
console.log(error);
});
}
}
因为是前后端分离，当前前端使用的端口是81，后端运行的端口是8080，就产生跨域问题，所以还需要在vue.config.js中进行代理配置。文章来源地址https://www.toymoban.com/news/detail-624748.html
devServer: {
host: '0.0.0.0',
port: port,
open: true,
proxy: {
// 到jeecg 的代理
['/geecg-api']: {
target: `http://localhost:8080`,
// target: `http://api-dashboard.yudao.iocoder.cn`,
changeOrigin: true,
pathRewrite: {
'^/geecg-api': ''
}
}
},
disableHostCheck: true
},到了这里，关于再vue项目中使用axios原生发送post请求的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
