vue和node中跨域的两种解决方式

vue中的proxyTable代理

module.exports = {
    devServer: {
        open: true,
        port: 80,
        host: "127.0.0.1",
        // 开启代理服务
        proxy: {
            // 请求地址以/api开头使用该代理
            "/api": {
                target: "http://127.0.0.1:8081", //代理的是哪个服务
                changeOrign: true,//是否允许跨越
                pathRewrite: {
                    "^/api": "" //重写
                }
            }
        }
    }
}

注意： ‘/api’ 为匹配项，target 为被请求的地址，因为在 ajax 的 url 中加了前缀 ‘/api’，而原本的接口是没有这个前缀的，所以需要通过 pathRewrite 来重写地址，将前缀 ‘/api’ 转为 ‘/’。如果本身的接口地址就有 ‘/api’ 这种通用前缀，就可以把 pathRewrite 删掉。

node后台中的cross设置

设置相对简单得服务端配置响应头信息。允许某些来源、某些接口、某些方法以某些形式被跨域调用。

//express中设置cross访问限制
let express = require('express');
let app = express();
app.all("*",function(req,res,next){
  //设置允许跨域的域名，*代表允许任意域名跨域
  res.header("Access-Control-Allow-Origin","*");
  //允许的header类型
  res.header("Access-Control-Allow-Headers","content-type");
  //跨域允许的请求方式 
  res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
  if (req.method.toLowerCase() == 'options')
      res.send(200);  //让options尝试请求快速结束
  else
      next();
})