webpack之proxy代理配置

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)
});