两种常用的跨域设置

nodejs服务器端跨域设置

使用一个中间件

app.use(async (ctx,next)=> {
    // * 表示允许所有域名访问,可以设置指定的域名
    ctx.set('Access-Control-Allow-Origin', '*');
    await next();
})

更为复杂一点的跨域中间件如下:

module.exports = app => {
  // 跨域设置
  app.use(async (ctx, next) => {
    // 跨域设置
    ctx.set("Access-Control-Allow-Origin", "*");
    // 请求头设置
    ctx.set(
      "Access-Control-Allow-Headers",
      `Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild,x-token,sessionToken,token`
    );
    ctx.set("Access-Control-Allow-Methods", "PUT, POST, GET, DELETE, OPTIONS");
    // 一天内不会发送options请求
    // ctx.set('Access-Control-Max-Age', '86400');
    // 预请求处理
    if (ctx.method == "OPTIONS") {
      ctx.body = 200;
    } else {
      await next();
    }
  });
};

webpack设置跨域

1. 我们的服务器域名是 http://132.232.94.151:3005,而我们本地跑的服务端口域名为http://localhost:8082

这时候我们本地的项目去访问远程的接口就是跨域了,会出现如下提示

Access to XMLHttpRequest at 'http://132.232.94.151:3005/goods' from origin 'http://localhost:8082' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

2. 如果服务器没有设置跨域,我们可以在webpack去设置跨域,具体做法如下:

.env.development 配置

VUE_APP_URL="/api"   // 即使我们的接口地址没有api,也是这样写,后面有说明

axios的拦截器使用 process.env.VUE_APP_URL获取上面环境配置的地址

const service = axios.create({
  baseURL: process.env.VUE_APP_URL, // api 的 VUE_APP_URL
  timeout: 50000 // 请求超时时间(因为需要调试后台,所以设置得比较大)
});

3. 项目根目录vue.config.js(若没有就创建)配置跨域

   module.exports = {
     devServer: {
       proxy: {
   
        // 只要请求地址有'api'都会匹配上 
   
        // 只要请求地址有'api'都会匹配上 
   
         "/api": {
           target: "http://132.232.94.151:3005",
           ws: true,
           changeOrigin: true,
           pathRewrite: {
             "^/api": "" //通过pathRewrite重写地址，将前缀/api转为/
           }
         }
       }
     }
   }
   

4. 我们的vue项目里有如下请求

    created() {
       let url = "/goods";
       this.$axios
         .get(url)
         .then(result => {
           console.log("result", result);
         })
         .catch(err => {
           console.log("err", err);
         });
     }
   

5. 查看我们的控制台的network发现,我们发送了这样的一个请求

   http://localhost:8082/api/goods
   

6. 很神奇的是我们竟然拿到了数据,原因就是,上面我们配置的proxy(代理的意思),当我们发送请求```http://localhost:8082/api/goods``,这个代理插件发现我们的请求带有'api',它就我们把这个请求转发到http://132.232.94.151:3005, 同时下面的这个配置

   pathRewrite: {
   
    "^/api": "" //通过pathRewrite重写地址，将前缀/api转为/
   }
   

   能帮我们把/api 变为/,所以我们请求 http://localhost:8082/api/goods, 最后实际上我们请求的是 http://132.232.94.151:3005/goods
   "^/api": "" //通过pathRewrite重写地址，将前缀/api转为/
   }

   
   能帮我们把/api 变为/,所以我们请求  http://localhost:8082/api/goods, 最后实际上我们请求的是 http://132.232.94.151:3005/goods