全栈开发之跨域问题

前端：vue-cli+mint-ui+axios

后端：node+express+mongoDB

前端调用后端接口时出现跨域问题：

解决方案：

方案1：后端用express写服务时加入跨域头

let express = require("express");
let app = express();
//跨域头
app.all('*', function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, 

                     Authorization, Accept, X-Requested-With');
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');

  if (req.method == 'OPTIONS') {
    res.send(200); //让options请求快速返回
  }
  else {
    next();
  }
});

app.listen(3000)

方案2：vue-cli借助http-proxy-middleware插件解决跨域请求api
在目录config/index.js-dev/proxyTable中加入

proxyTable: {
  '/sliders': {
    target: 'http://localhost:3000/',//目标url地址
    changeOrigin: true,//指示是否跨域
    pathRewrite: {
      '^/': '/'//可以使用 /sliders 等价于 http://localhost:3000/sliders
    }
  }
},

其它：还可以使用jsonp。