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起的服务默认端口是8080pathRewrite: {"/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/userapp.get('/api/user', function(req, res) {// 请求成功返回数据res.json({app: 'app', name: 'before'})});// 接口 coreapp.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)
});

webpack的proxy代理配置相关推荐

vue-cli、脚手架创建、eslint、alias别名配置、proxy代理配置、axios、scoped、穿透、媒体查询、12栅格、动态rem、1px边框、移动端事件、300ms延迟问题（六）
vue-cli的使用现在使用前端工程化开发项目是主流的趋势,也就是说,我们需要使用一些工具来搭建vue的开发环境.一般情况下我们都会选择使用webpack进行项目的构建,在这里我们直接使用vue官方 ...
axios请求与proxy代理配置
如果是不考虑跨域问题,那么请求后台数据使用的就是该路径.但是根据同源策略,3000端口(前端页面端口)无法访问5000端口(后台数据端口),此时就需要使用proxy代理配置了. /** * 获取所有的 ...
vue-cli 3.0之跨域请求devServer proxy代理配置
vue-cli 3.0之跨域请求devServer proxy代理配置当我们的前端服务和后端服务不同源即协议不同,端口不同,域名不同时,就会出现跨域的问题. 通过配置devServer.proxy就 ...
proxy代理配置 goproxy 代理配置
1 百度上搜索 goproxy 2 下载 proxy-linux-amd64.tar.gz 2.1 直接下载地址: 该版本不限制默认数量调整默认的每秒最大连接数,由默认20改为 ...
webpack+vue-cli 中proxyTable配置接口地址代理
在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用vue-cli进行项目打包的时候,我们在本地启动服务器后,比如本地开发服务下是 http://lo ...
proxy代理的使用（解决跨域，配置多个代理）
proxy代理的使用(解决跨域,配置多个代理) 一.什么是代理字面意思就是类似中间商,开启代理,原理就是在本地创建一个虚拟服务器,发送请求数据,同时接受请求的数据, 利用服务器与服务器间,交互,不会 ...
vue.config.js配置proxy代理解决跨越；proxy代理报404；
像我们本地的vue项目运行起来,访问的地址一般是localhost,这个时候请求后台的接口,端口号也不一致,肯定就会存在跨域问题,所以我们要是想正常访问接口的话,就需要解决掉跨域问题. 本文我们是在v ...
一份比较详细的 webpack 4.x 手工配置基础开发环境附源码
重新书写了博客内容,希望可以更好的呈现该有的知识点. bundle.js 指的是 webpack 打包后的文件. 小剧场项目经理:我们要开始一个新的项目,裤裆你来负责项目构建吧. 我:好的没问题,经 ...
vue跨域问题：proxy代理跨域
前端跨域,本地跨域,vue项目跨域问题疑问1: 前端开发中解决浏览器的跨域问题 (推荐阅读) 什么是跨域? 为什么要跨域? 解决"跨域"的五种常见方式: 1. JSONP 2. ...

webpack的proxy代理配置

webpack的proxy代理配置

模拟接口（不走代理，直接请求本地的服务）

webpack的proxy代理配置相关推荐

最新文章

热门文章