vue+express搭建项目，解决前后端跨域的问题

很早之前就想用nodejs写后台接口了，不想每次写vue的时候，都是用假数据或者是mock来写，最近正好在学习nodejs,看了下express框架，这次的数据我是在express里面造的假数据，主要想看下vue怎么和express相互连接起来使用的，后期我会加入mongdb，希望自己能坚持下去。。。。。

看下面的内容之前，请确保自己已经安装了vue-cli的前端项目和express-generator搭建的node后端项目

前端

1.在config里面的index.js里面设置前端跨域，我后台默认的端口号是3000，所以此时我们target就是http://localhost:3000，我自己理解是他会将我后台的请求从3000映射到我8081上面去，我启动前端服务，才会请求到数据。

proxyTable: {
            '/api': {
                target: 'http://localhost:3000', // 请求远程服务器
                //target: 'http://10.9.35.238:8067', // 请求远程服务器
                //target: 'http://10.10.133.52:8080', // 请求远程服务器
                changeOrigin: true,
                secure: false,
                pathRewrite: { "^/api": "" }
            }
        },

2.在前端项目的src下新建api文件夹,里面分别新建index.js和public.js，public.js里面主要是对axios对get,post,delete请求的封装

import axios from 'axios'
import Qs from 'Qs'
import { Loading } from 'element-ui';

axios.defaults.headers = {
  'Accept':'application/json'
  //'Accept': 'text/plain, */*'
  //'Accept': 'text/json'
  //'X-Requested-With':'XMLHttpRequest'
};
//axios.defaults.baseURL="http://10.9.35.238"
axios.defaults.baseURL="http://localhost:8081"
//axios.defaults.baseURL="http://localhost:9090"
axios.defaults.timeout = 10000
axios.defaults.withCredentials=true
//let loadingInstance

/*axios.interceptors.request.use(function (config) {
　　// 在发送请求之前做些什么
  loadingInstance = Loading.service({ fullscreen: true,background:'rgba(0,0,0,0.6)' });
  return config
}, function (error) {
　　// 对请求错误做些什么
  return Promise.reject(error)
});*/

axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  var msg=response.data.message
  if(msg && msg.indexOf("oauth2/authorize")!=-1){
    window.location.href = msg
  }else{
    return response
  }
}, function (error) {
　　// 对响应错误做点什么
　return Promise.reject(error)
});
export default {
  fetchGet (url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.get(url,  Qs.stringify(params)).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  },
  fetchQuickSearch (url) {
    return new Promise((resolve, reject) => {
      axios.get(url).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  },
  fetchPost (url, params = {},config) {
    return new Promise((resolve, reject) => {
      axios.post(url, Qs.stringify(params),config).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  },
  fetchDelete (url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.delete(url, Qs.stringify(params)).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  }
}

3.index.js里面是我们请求的接口，假如我们请求的地址是localhost:8081，那么接口就是localhost:8081/api/leftMenu

import http from './public'
//获取左侧菜单
export const leftMenu = (params) =>{
    return http.fetchGet('/api/leftMenu',params)
}

4.前端启动服务，npm run dev,在浏览器里面输入http://localhost:8081/#/，成功访问页面，此时接口还没好，请看下面

后台

1.在后端项目的根目录下，新建api文件夹，里面存放的是我前端要请求的json数据

2. app.js里面路由配置

var indexRouter = require('./routes/index');
app.use('/', indexRouter);

3.在routes下面的index.js下面引入我的json数据，require里面是json的路径,res.json()发送一个json的响应

//获取左侧菜单
router.get('/leftMenu', function(req, res, next) {
  var leftMenu = require("../api/testApi/leftMenu.json")
  res.json(leftMenu);
});

4.后台设置允许跨域

//跨域访问
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
})

5.启动后台服务npm start，重新刷新页面，我们可以看到接口已经请求过来了。

中间我一直将犯了一个错，将api的index.js中接口的写成return http.fetchGet('http://localhost:3000/api/leftMenu',params)，前端一直报跨域，但是自己命名已经解决跨域的问题，后来改成return http.fetchGet('/api/leftMenu',params)就好了，其实这边的地址不是后台的地址，前端跨域已经映射到前端服务上了。