美文网首页
express+vue前后端分离跨域问题解决办法

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

作者: 柳宁依 | 来源:发表于2019-02-11 22:25 被阅读0次

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

相关文章

网友评论

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

      本文链接:https://www.haomeiwen.com/subject/zfmceqtx.html