webpack配置代理跨域

其实跨域问题一直都是我们前端同学比较头疼的东西,后端帮你解决还好,如果不帮你解决还得靠自己
同时跨域也是面试必问的问题。
相较于 jsonp 和cors跨域来说　　webpack是比较新的解决跨域的方法
我也曾听过某个公司的技术经理说到我们比较喜欢听到面试者说webpack 解决跨域大概就是这个意思
所以说啊技术这种东西虽然最新的公司不用但还看得出来你一直在跟进最新的技术侧面反应你比较好学这个才是公司想要的人才
今天就来浅谈一下 webpack 代理解决跨域的问题
跨域往往都是客户端向服务器发送请求导致的
那如果是服务器向服务器发送请求呢那就不存在跨域的问题了
我们webpack 本身有一个插件叫做 webpack-dev-server 是一个基于node.js的express 框架搭建的本地服务器
如果让我们本地服务器成为一个代理向远程服务器发送请求那么就能解决跨域的问题了
好了废话不多说了还是走入正题了前提是webpack 安装了 webpack-dev-server
1.现在我们使用本地创建俩个服务器但是端口号不同来实现跨域的模拟
在 webpack.config.js文件中配置 devServer
当运行 devServer的时候 webpack 运行在 3000端口

devServer:{   // 开发服务器配置port:3000,
}

同时我们也创建一个 express 的本地服务器
可以就在 webpack项目下创建一个server.js文件因为里面本来就有express 的框架我们可以直接引入
运行的时候直接 node server.js

let express=require('express');let app=new express();app.get('/user',(req,res)=>{res.json({name:'小王'});  // 向前台 返回一个json串
})app.listen(8080); // 在这里 我们监听8080 端口 形成跨域问题

然后在入口文件 src/index.js文件

let xhr=new XMLHttpRequest(); //创建ajax 对象
xhr.open('get','/user',true);xhr.onload=function(){console.log(xhr.response);
}
xhr.send(null);

如果我们不配置代理的话运行项目之后他会查找 3000/user 这个时候明显会报错
它会报 not found 没有找到显然因为我们是在8080/user 下创建的访问地址
这个时候需要我们配置代理了

devServer:{   // 开发服务器配置port:3000,open:true,// 每次运行程序 自动打开浏览器proxy:{   // 配置 代理'/api':'http://localhost:8080' //配置一个代理}}

当我们在访问地址的 /api/user 它会自动帮我们加上 ‘http://localhost:8080/api/user ‘这个时候前台的入口js文件请求也要改变了

xhr.open('get','、/api/user',true);   /user前面　加上　/api  其他保持 不变

同时后台文件也要改变了

app.get('/api/user',(req,res)=>{  // 请求地址上也要加上 /api/userres.json({name:'小王'});
})

这下才达到了真正了跨域问题解决了如果你的问题比较急于测试的话那么上面就可以但有个小问题了
不可能后台都帮我们加上api 这下后台接口上的配置我们前台起的名字说了算你觉得后台人员会听吗
人家可能后台人员不想加上那个 /api 这个时候就得靠我们自己来解决问题了那么问题来了
能不能每次请求帮我们把那个 /api 去掉呢答案的肯定的了
这个时候后台不需要再加 /api 前台配置要改一改

proxy:{  // 以重写的方式  把请求代理到express服务器上'/api':{target:'http://localhost:8080',// 配置请求地址pathRewrite:{'/api':''}  //重写   发送的时候把 /api 去掉}
}

这样是不是好多了前后端人员相视一笑其实一个程序员最不想去看别人的代码和让别人来改自己的代码当然向人请教的除外哈
2. 当然还有俩种跨域方式下面的仅仅作为了解哈
我们可以将请求的地址写在 webpack的配置文件中既然 devServer 里面有express 我们服务器写到里面不是省去了跨域的问题了使两者在同一个接口下当然这种情况仅仅限于你要模拟数据测试测试还可以撒
devServer 里面有一个 before的选项让你可以用来写个请求地址模拟数据也是达到了解决跨域的问题

devServer:{   // 开发服务器配置port:3000,open:true,before:function(app){app.get('/user',(req,res)=>{res.json({name:'小王'});})
}

前台请求地址直接写 /user 因为他们俩者本在就在同一个服务器下
3.服务器文件代码和前台代码写在一起的方法在运行服务器的时候连带运行 webpack项目
这个时候需要安装一个webpack中间件

cnpm i webpack-dev-middleware --save
在server.js文件中

let webpack=require('webpack');
let config=require('./webpack.config.js');// 引入 webpack 配置文件
// 引入中间件     来运行 webpack
let middle=require('webpack-dev-middleware');
let compiler=webpack(config);
app.use(middle(compiler));
app.listen(3000)

在运行 server.js node server.js的时候他还会运行 devServer
这种情况不过得保持俩者的监听端口一致在devServer 中也要监听 3000 端口
不过啊现在很多项目都是前后端分离展开的下面的情况作为简单了解就可以了
好了到此结束了谢谢觉得有用的点个小心心 ^___

webpack配置代理跨域相关推荐

Flask + Nginx + React + Webpack 配置解决跨域问题
用 Flask 做后端开发单页应用,webpack-dev-server 生成静态文件在http://localhost:8080 下,Flask 页面在 http://localhost:5000 ...
（十五）配置代理跨域
1.解决Ajax请求跨域的两种方式服务器之间传输数据不受同源策略的限制,Ajax是前端技术. (1)解决跨域问题的两种方式 jsonp cors jsonp:利用<script>的s ...
通过 Nginx 代理转发配置实现跨域（API 代理转发）
通过 Nginx 代理转发配置实现跨域(API 代理转发) 阅读 2285 收藏 119 2017-04-08 原文链接:www.thinktxt.com 1元视频体验视频通话10000分钟cloud ...
vue跨域问题：proxy代理跨域
前端跨域,本地跨域,vue项目跨域问题疑问1: 前端开发中解决浏览器的跨域问题 (推荐阅读) 什么是跨域? 为什么要跨域? 解决"跨域"的五种常见方式: 1. JSONP 2. ...
关于vue-cli3中配置请求跨域的问题
关于vue-cli3中配置请求跨域的问题根据Vue CLI3官方文档, 需要在vue.config.js文件中配置devServer.proxy选项来解决跨域问题. 1.关于vue.config.j ...
proxytable代理不生效_proxyTable代理跨域使用详解
这次给大家带来proxyTable代理跨域使用详解,proxyTable代理跨域使用的注意事项有哪些,下面就是实战案例,一起来看一下. 什么是代理跨域浏览器之间有同源策略,出于安全考虑不同域之间不允 ...
怎么实现跨域？配置vue跨域proxy，jsonp跨域很简单
如果不设置跨域需要跨域的接口是 https://sug.so.360.cn/suggest?word=a word 是参数怎么设置跨域 1.vue的跨域第一步在 vue 的根目录创建一个 vu ...
python flask跨域_Flask配置Cors跨域的实现
1 跨域的理解跨域是指:浏览器A从服务器B获取的静态资源,包括Html.Css.Js,然后在Js中通过Ajax访问C服务器的静态资源或请求.即:浏览器A从B服务器拿的资源,资源中想访问服务器C的资源 ...
vue配置解决跨域问题
我们在使用vue时,经常要遇到跨域的问题,其实这个问题很好解决,只需我们在vue-cli中配置一下即可. 实现跨越请求: 在config文件夹下找到index.js proxyTable: {&quo ...

webpack配置代理跨域

webpack配置代理跨域相关推荐

最新文章

热门文章