项目前端是vue-cli生成的项目结构,后端是express的生成器生成的目录结构。
1、express后端项目中安装cors,并在app.js文件中引入cors,写下如下几行代码
var cors = require('cors');
//跨域
app.use(cors({
origin:['http://localhost:8080'],
methods:['GET','POST'],
alloweHeaders:['Conten-Type', 'Authorization']
}));
2、在router文件夹下的index.js文件中加上接口书写,这里是伪造的数据,并未从数据库获取
router.post('/first', function(req, res, next) {
res.json({name:'aaa',pwd:'123'});
});
3、前端项目安装axios,并在main.js全局引入axios
import axios from 'axios'
Vue.prototype.$axios=axios
4、在页面中发送请求
mounted(){
this.$axios.post("http://localhost:3000/first").then((res)=>{
console.log(res)
})
}
可在控制台看到first接口请求成功,并返回了 {"name":"aaa","pwd":"123"}