項(xiàng)目前端是vue-cli生成的項(xiàng)目結(jié)構(gòu)蝉揍,后端是express的生成器生成的目錄結(jié)構(gòu)鲫惶。
1鳖孤、express后端項(xiàng)目中安裝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文件中加上接口書寫,這里是偽造的數(shù)據(jù)柠横,并未從數(shù)據(jù)庫獲取
router.post('/first', function(req, res, next) {
? res.json({name:'aaa',pwd:'123'});
});
3窃款、前端項(xiàng)目安裝axios,并在main.js全局引入axios
import axios from 'axios'
Vue.prototype.$axios=axios
4牍氛、在頁面中發(fā)送請求
mounted(){
? this.$axios.post("http://localhost:3000/first").then((res)=>{
? ? console.log(res)
? })
}
可在控制臺看到first接口請求成功晨继,并返回了?{"name":"aaa","pwd":"123"}