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"}