Vue开发阶段利用反向代理解决跨越问题

1.服务器环境，使用node搭建一个Express服务器，很简单的：

var express = require('express');
var app = express();
var fs = require("fs");

var bodyParser = require('body-parser');
var multer = require('multer');

//设置跨域访问
var allowCrossDomain = function (req, res, next) {
  // res.header('Access-Control-Allow-Origin', 'http://127.0.0.1:8080'); //自定义中间件，设置跨域需要的响应头。
  // res.header('Access-Control-Allow-Credentials', true); //自定义中间件，设置跨域需要的响应头。
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Content-Length, Authorization, Accept,yourHeaderFeild, withCredentials");
  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");
  if (req.method === 'OPTIONS') {
    res.send(200)
  } else {
    next()
  }
  // next();
};
app.use(allowCrossDomain); //

app.put('/api/storage/file', function (req, res) {
  // // 获得文件的临时路径
  // var tmp_path = req.files.thumbnail.path;
  // // 指定文件上传后的目录 - 示例为"images"目录。 
  // var target_path = __dirname + 'file_upload' + req.files.thumbnail.name;
  // // 移动文件
  // fs.rename(tmp_path, target_path, function (err) {
  //   if (err) throw err;
  //   // 删除临时文件夹文件, 
  //   fs.unlink(tmp_path, function () {
  //     if (err) throw err;
  //     res.send('File uploaded to: ' + target_path + ' - ' + req.files.thumbnail.size + ' bytes');
  //   });
  // });
  res.send(200);
});

其中有被我注释掉的一段代码，是用来解决跨越的（从服务端解决）。我们把它注释掉是为了尝试从客户端解决跨越问题。

// res.header('Access-Control-Allow-Origin', 'http://127.0.0.1:8080'); //自定义中间件，设置跨域需要的响应头。
  // res.header('Access-Control-Allow-Credentials', true); //自定义中间件，设置跨域需要的响应头。

2.客户端：

2.1 在你开发环境的Config/index.js里的dev里有个proxyTable：{}，给他加上下面一段代码：

proxyTable: {
      '/api': { //这里是我配置的名字
        target: 'http://192.168.30.160:7080', //这个路径是我代理到本地的php服务器,即你要请求的第三方接口
        changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite: {
          '^/api': '/api'
        } //这里重写路径运行后就代理到对应地址
      }
    },

2.2 使用axios发送http请求

我要发送的请求地址是这样的：

http://192.168.30.160:7080/api/storage/file?type=background&path=background.jpg

然后代码这样写：

doUploadFile: function(content) {
      var baseURL = 'http://192.168.30.160:7080';
      axios.put('/api/storage/file?type=background&path=background.jpg', content, { baseURL }).then(res => {
        //todo
      })      
    },

最后，发送请求，成功跨域：

3.关于生产环境

最后要说明的是，这个只能在开发环境使用，生产环境就失效了。