webpack配置代理跨域_yunchong_zhao的博客-程序员ITS301_webpack配置跨域

技术标签: webpack  js  

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yunchong_zhao/article/details/104606054

智能推荐

RT-Thread记录(五、RT-Thread 临界区保护与FreeRTOS的比较)_矜辰所致的博客-程序员ITS301_rt_enter_critical

本文聊聊临界区,以及RT-Thread对临界区的处理,通过源码分析一下 RT-Thread 对临界区保护的实现以及与 FreeRTOS 处理的不同。

WanaCrypt0r加密流程研究学习记录_艾米的爸爸的博客-程序员ITS301_wannacry加密流程

摘要:本文档根据多家安全公司对新型勒索软件WanaCrypt0r的逆向分析结果和报告,记录该勒索软件的加密过程和密钥架构。关键词:WanaCrypt0r、勒索软件、密钥、公钥、私钥、加密、RSA、AES、CryptGenRandom、CryptGenKey。1. 前言近日全球多个国家和地区的机构及个人电脑遭受到了新型勒索软件WanaCrypt0r(形象地直译为想哭)攻击。它利用了窃取自...

php redis expireat,expireAt 命令/方法/函数_一十马的博客-程序员ITS301

DescriptionSets an expiration date (a timestamp) on an item. pexpireAt requires a timestamp in milliseconds.给一个KEY设置一个生命周期,单位是UNIX的时间戳。(pexpireAt与其类似,区别是单位为毫秒)ParametersKey: key. The key that will dis...

查找路径的三种方法_蝶恋花~的博客-程序员ITS301_查找路径

访问其他路径下的文件,一般情况下两种方式,右键复制对应文件的相对路径,或者绝对路径。第三种那就手动写入。首先是相对路径与绝对路径:然而有时候这样得到的路径却无法访问,例如我将“logo.png”的相对路径复制过来,得到 src\assets\logo.png再使用ctrl+click键,跟踪指定文件,却得到以下结果这时,有必要弄清如何一级一级往上找寻对应文件路径了。 //直接写项目名,代表找寻和当前文件同级的内容../ //注:代表上一级../../ /

获取@RequestBody请求的参数信息报错:java.io.IOException Stream closed_暴走编程的博客-程序员ITS301_使用requestbody就报错

问题描述项目中采用spring aop进行日志记录,在切面类通知方法中编写日志逻辑时,需要获取 HttpSevletRequest 中的请求参数;对于普通参数来说,没有任何问题,但是当请求方式为 POST/PUT 并并且是 @RequestBody 标记的请求,在获取JSON参数时,会出现 java.io.IOException: Stream closed 异常;原因HttpServletReqeust获取输入流时仅允许读取一次,spring已经对 @ReqeustBody 提前进行了处理,通过断点

使用tornado让你的请求异步非阻塞_harleylau的博客-程序员ITS301

####前言也许有同学很迷惑:tornado不是标榜异步非阻塞解决10K问题的嘛?但是我却发现不是torando不好,而是你用错了.比如最近发现一个事情:某网站打开页面很慢,服务器cpu/内存都正常.网络状态也良好.后来发现,打开页面会有很多请求后端数据库的访问,有一个mongodb的数据库业务api的rest服务.但是它的tornado却用错了,一步步的来研究问题:####说明以

随便推点

二进制部署kubernetes_lookNo施的博客-程序员ITS301

2.基础环境准备2.1 系统基础设置(所有机器都要执行)2.1.1 设置主机名hostnamectl set-hostname hdss7-xx.host.com2.1.2 设置网卡~]# cat /etc/sysconfig/network-scripts/ifcfg-ens33TYPE="Ethernet"PROXY_METHOD="none"BROWSER_ONLY="no"BOOTPROTO=noneDEFROUTE="yes"IPV4_FAILURE_FATAL="no"

课程设计2:交通灯仿真设计_2EM34_E13的博客-程序员ITS301_交通灯电子技术课程设计报告仿真

二、实验学时:三、设计要求::设计并实现一个简单的十字路口交通灯控制电路。具体要求:以4个红色指示灯、4个绿色指示灯和4个黄色指示灯模拟路口东西南北4个方向的红绿黄交通灯。控制这些灯,使它们安下列规律亮灭。1.东西方向绿灯亮,南北方向红灯亮。东西方向通车,时间20秒;2.东西方向黄灯闪烁,南北方向红灯亮,时间5秒。3.东西方向红灯亮,南北方向绿灯亮。南北方向通车,时间20秒;4.东西方向红灯亮,南北方向黄灯闪烁,时间5秒。5.返回1,继续运行。要求在仿真软件中设计并运行,或设计实际电路调试运

Java大文件分片上传/多线程上传示例_M_Snow的博客-程序员ITS301

一、 功能性需求与非功能性需求要求操作便利,一次选择多个文件和文件夹进行上传;支持PC端全平台操作系统,Windows,Linux,Mac支持文件和文件夹的批量下载,断点续传。刷新页面后继续传输。关闭浏览器后保留进度信息。支持文件夹批量上传下载,服务器端保留文件夹层级结构,服务器端文件夹层级结构与本地相同。支持大文件批量上传(20G)和下载,同时需要保证上传期间用户电脑不出现卡死等体验;支持文件夹上传,文件夹中的文件数量达到1万个以上,且包含层级结构。支持断点续传,关闭浏览器或刷新浏

VS2015 程序运行调试错误总结_qq_32541007的博客-程序员ITS301_debug error怎么解决vs2015

1.自定义的数组(各种数组)可以进行非法访问(不报错!)但不能进行非法赋值!运行错误界面调试错误界面2.内存开辟的空间必须先赋值,否则报错3.NULL既不能访问,更不能赋值

html与css_SHEERLOHAS的博客-程序员ITS301_css与html

html与css外部样式表内部样式表内联样式常用标签外部样式表当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>内部样式表<head><style type="text/css">body {background-c