webpack之proxy代理配置

时间:2021-1-8 作者:admin

webpack之proxy代理配置

在实际项目中不可避免会遇到跨越问题,webpack中的proxy就是解决前端跨域的方法之一。
跨越问题:协议域名端口 三者只要有一个与服务端的不一致,就会报跨域错误

// webpack.config.js
devServer: {
    hot:true, // 它是热更新:只更新改变的组件或者模块,不会整体刷新页面
    open: true, // 是否自动打开浏览器
    proxy: { // 配置代理(只在本地开发有效,上线无效)
      "/x": { // 这是请求接口中要替换的标识
        target: "https://api.bilibili.com", // 被替换的目标地址,即把 /api 替换成这个
        pathRewrite: {"^/api" : ""}, 
        secure: false, // 若代理的地址是https协议,需要配置这个属性
      },
      '/api': {
        target: 'http://localhost:3000', // 这是本地用node写的一个服务,用webpack-dev-server起的服务默认端口是8080
        pathRewrite: {"/api" : ""}, // 后台在转接的时候url中是没有 /api 的
        changeOrigin: true, // 加了这个属性,那后端收到的请求头中的host是目标地址 target
      },
    } 
  }
// 请求接口文件
// 会报跨域的错,因为本地的是 http://localhost:8080/
fetch('/x/web-interface/nav').then(res=>res.json).then(data => {
  console.log(data)
});

let xhr = new XMLHttpRequest();
xhr.open('get','/api/user',true)
xhr.onreadystatechange = function(){
  if(xhr.readyState === 4) {
    console.log(xhr);
    console.log(xhr.response)
  }
}
xhr.send(null);

模拟接口(不走代理,直接请求本地的服务)

不走代理,自己在本地模拟一下接口及返回数据,用到的是 devServer.before
使用模拟接口,就不要做代理

devServer: {
    hot:true, // 它是热更新:只更新改变的组件或者模块,不会整体刷新页面
    open: true, // 是否自动打开浏览器
    // 直接自己造数据,不访问后端接口
    before: function(app){
      // 接口 /api/user
      app.get('/api/user', function(req, res) {
        // 请求成功返回数据
        res.json({app: 'app', name: 'before'})
      });

      // 接口 core
      app.get('/api/core', function(req, res) {
        // 请求成功返回数据
        res.json({name: '这是第二个接口'})
      });
    }
  }
// 接口请求文件
let xhr = new XMLHttpRequest();
xhr.open('get','/api/user',true)
xhr.onreadystatechange = function(){
  if(xhr.readyState === 4) {
    console.log(xhr);
    console.log(xhr.response)
  }
}
xhr.send(null);


fetch('/api/core').then(res=>res.json).then(data => {
  console.log(data)
});
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。