其实跨域问题一直都是我们前端同学比较头疼的东西,后端帮你解决还好,如果不帮你解决还得靠自己
同时跨域也是面试必问的问题。
相较于 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/user
res.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 端口
不过啊 现在很多项目都是前后端分离展开的 下面的情况 作为 简单了解就可以了
好了到此结束了 谢谢 觉得有用的点个小心心 ___
