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