express+vue前后端分离跨域问题解决办法

项目前端是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"}