请求头跨域

第一次接触nodejs+express+mongoose写接口，过程中踩坑无数，没接触过后端遇到跨域问题真的是一个接着一个问题，经过各种百度和交流群求救才解决问题，虽然我的最终问题有点坑，但还是感谢发烧友的帮助明白了这是一个请求响应头跨域问题，并且致命点在于没搞清楚响应头和请求头之间的关系，实际上响应头和请求头原来是包含关系。

环境

前端框架：vue-cli2.x项目
请求：axios
数据库：mongodb
后端：nodejs+express+mongoose

针对请求头的跨域基本配置如下

后端配置
添加以下代码到app.js即可

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

前端配置：vue-cli项目
文件路径：config/index.js

    proxyTable: {
      "/api": {
        target: "http://192.168.1.95:9501", // 接口的域名
        pathRewrite: {
          "^/api": "" // 需要将/api重写为''
        },
        secure: false, // 如果是https接口，需要配置这个参数
        changeOrigin: true //如果接口跨域，需要进行这个参数配置
      }
    },

为什么说没搞清楚响应头和请求头之间的关系
原因：axios重写时请求头配置token
报错如下：
Access to XMLHttpRequest at 'http://192.168.1.95:9501/users/register' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field token is not allowed by Access-Control-Allow-Headers in preflight response.
解决方案：响应头和请求头原来是包含关系
如图：

结论
响应头和请求头之间的关键就在于请求头添加设置了token，
而上面的响应头里并没有包含token在内，因此就会报错。
如果请求头里添加了配置，响应头必须同理添加配置
即在app.all代码里配置如下：

res.header('Access-Control-Allow-Headers', 'token,Content-Type,Content-Length,Authorization,Origin,Accept,X-Requested-With');