vue-配置代理解决跨域

我们需要向一台服务器上上传图片，接口是 "http://xxxx.xxx.xx/file/upload_img",直接向这台服务器请求上传图片将会产生跨域问题，我们这里有两种解决方式
1.让后台帮忙配置,一下是node实现

// 允许跨域
app.all('*', function(req, res, next) {
  // res.header("Access-Control-Allow-Origin", req.headers.origin);
  res.header("Access-Control-Allow-Origin", '*');
  res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With,X-Custom-Header");
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
  res.header("Access-Control-Allow-Credentials","true");
  res.header("X-Powered-By",' 3.2.1')
  if(req.method === "OPTIONS") res.send(200);/*让options请求快速返回*/
  else  next();
});

2.前端配置代理（在前端请求node服务器，node服务器再帮我们发送真正的请求）

这里的过程是，前端域名为localhost:8080,当我们请求一个接口：'http://xxxx.xxx.xx/file/upload_img'的时候，匹配到/file时，
1.先请求localhost:8080 node代理服务器
2.node代理服务器 帮我们 再去请求 http://xxxx.xxx.xx 这个服务器,找到file/img_upload接口
3.http://xxxx.xxx.xx/file/upload_img将内容返回给 node代理服务器
4.node代理服务器把内容返给前端

pathRewirte作用 在前端将接口模块化
我们前端写的接口是'localhost:8080/file/img_upload',
后端的接口是'localhost:8080/img_upload'
此时就可以把"^file":""

devServer: {
        // 解决跨域（代理的原理）
        proxy: {
          // 当碰到/file时
            "/file": {
                target: "http://zyfp.ss.gofund.cn/",
                changeOrigin: true,
            // "pathRewrite": { 如果接口本身没有 /api,则把 /api 替换成空
            //     "^/file":""
            // },
          },
        },

    },