解决 webpack 代理服务只能 localhost 访问

最新推荐文章于 2024-07-16 10:54:40 发布
原创 最新推荐文章于 2024-07-16 10:54:40 发布 · 1.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webpack #ip

博客提及了package.json，虽未详细阐述，但它是项目配置重要文件。结合标签推测可能与webpack构建及IP相关配置有关，在项目开发中package.json可管理依赖和脚本等。 
"dev": "cross-env NODE_ENV=development webpack-dev-server --inline --host 0.0.0.0 --hot"

package.json 

 

webpack 搭建本地开发服务器
阿城的博客
03-17 810
在此之前的 webpack 配置是必不可少的。但是开发体验并不好，一直需要 npm run build 手动打包。我们希望可以做到，当文件发生变化时，可以自动的完成 编译 和 展示；
webpack配置proxyTable时pathRewrite无效的解决方法
12-09
在项目开发中，接口联调的时候一般都是同域名下，且不存在跨域的情况下进行接口联调，但是当我们在本地启动服务器后，比如本地开发服务下是 http://localhost:8080 这样的访问链接，但是我们的接口地址是 ...
vue项目中webpack-dev-server的open和host0.0.0.0配置冲突
cafehaus的博客
02-16 2122
一个比较老的公司项目，webpack 用的 v3 版本，为了实现localhost、127.0.0.1和本机ip可以同时访问，webpack的devServer里的 host 我们一般会设置成 0.0.0.0，这样本机所有 ipv4 地址都可以实现访问。比如我们要将本地运行的前端项目，分享给公司的后端、产品、测试…预览效果，如果 host 直接设置的 localhost，运行后打开的地址 http://localhost:8080，直接分享给别人是没法打开的。
webpack基础知识七：说说webpack proxy工作原理？为什么能解决跨域?
Allen-Ye博客
08-05 1218
说说webpack proxy工作原理？为什么能解决跨域?
webpack踩坑：只能通过localhost和127.0.0.1访问本机应用，无法通过ip地址访问
Kevin的博客
06-22 7379
index.js文件中的host默认值为localhost，也就是只能通过这个hostname访问，这样排除了被他人远程访问的可能性，这也就是为什么通过192.168.x.x无法访问的原因。 通过将其改为0.0.0.0，允许任意人访问。 ...
webpack-dev-server不能用ipv4访问，只能用localhost访问
weixin_30778805的博客
02-22 654
今天用webpack-dev-servser启动一个项目时遇到一个问题， 想用手机连同一局域网测试，但发现不能用iPv4+端口号访问。 原因：如果host指明了，只能使用配置绑定的host才能访问 如果需要使localhost和127.0.0.1以及iPv4均可以访问，你可以使用host配置为0.0.0.0 有可能npm start服务写在package.json中 "scripts...
webpack-dev-server的proxy代理https网站报错：ERR_TLS_CERT_ALTNAME_INVALID
前端蜗牛君
04-25 5882
本地开发环境中使用webpack-dev-server用作对远程测试服务器的API请求的代理。远程服务器使用的是HTTPS，这时页面会报错： 打开vscode，终端报错： [HPM] Error occurred while trying to proxy request /api/v1/home/comprehensive-search from localhost:8888 to https://www.xxx.com (ERR_TLS_CERT_ALTNAME_INVALID) (https:
webpack本地开发环境无法用IP访问的解决方法
11-28
然而，在实际工作中，可能会遇到一个问题，即本地开发环境只能通过`http://localhost:8080`来访问，而不能使用`http://本机IP:8080`的方式进行远程访问或在同一网络下的其他设备上预览。这主要是由于webpack的默认...
webpack开发跨域问题解决办法
08-29
// http://localhost:8080/device/space 访问本地服务 return res.json(); }).then(res => { console.log(res); }) ``` 在上面的代码中，因为 URL 不以 `/` 开始，所以该请求不会被代理到 `...
webpack proxy 使用(代理的使用)
10-15
本篇文章将详细介绍如何在 Webpack 中设置代理，以及代理在解决跨域问题上的作用。 ### 1. 为什么需要代理 在开发环境中，我们通常使用 `http://localhost` 作为服务器地址，但有时我们需要访问的数据源并不在本地...
webpack配置devServer配置https代理与证书
热门推荐
舜岳的博客
01-17 1万+
浏览器如果需要开发某些特定功能，需要https浏览器才会给予功能权限， 则开发时我们需要在https环境 下面是配置一个webpack devServer的https环境 //webpack.config.js module.exports = { ... devServer: { port: 8080, proxy: [{ context: ['/api'], //将 "https://urlname.com:8080/api" 转发到 "https://127.0.0
Webpack-dev-server的proxy用法
qq_15058285的博客
10-24 1477
Webpack-dev-server的proxy用法前言在webpack.config.js中配置使用一:使用二使用三:使用四:使用五:解决跨域原理vue-cli中proxyTable配置接口地址代理示例更多参数参考 前言 如果你有单独的后端开发服务器 API，并且希望在同域名下发送 API 请求 ，那么代理某些 URL 会很有用。 解决开发环境的跨域问题(不用在去配置nginx和host, 爽...
webpack配置代理请求
qq_45089709的博客
07-16 1325
【代码】webpack配置代理请求。
vue请求代理查看真实地址
2026的博客
01-08 9064
vue使用proxy代理地址，进行前后端联调时，服务不通时很难发现问题在哪里，所以此文讲述了可以查看访问的真实地址的相关配置，包括webpack和vite。
webpack-dev-server 的基本配置
wangrong111222的博客
08-01 4752
首先安装cnpm i -D webpack-dev-server 然后在 build/webpack.config.js里修改 设置一个变量   //定义一个变量来；确定当前环境是否是开发环境；process.env.NODE_ENV是在我们设置在package.json命令行的值； const isDEV=process.env.NODE_ENV==="development"; ...
使用cross-env解决跨平台设置NODE ENV的问题
hgffhh的博客
11-14 3295
使用cross-env解决跨平台设置NODE ENV的问题
Web启动项目走Https协议（Webpack版，Umi版和Host代理版）
Cvory
10-13 2428
需求 Web项目的启动，一般是默认的http协议，在某些业务需求时，需要走https来调试 Webpack版本 只需在webpack的devServer中配置就可以了 devServer: { host: '0.0.0.0', port: 8080, https: true, // 加入这句即可 } Umi脚手架版本 官方文档介绍：https://umijs.org/zh-CN/docs/env-variables#https package.json添加一条命令 Host代理版 有一
webpack Proxy原理 和 跨域的解决方案
weixin_43416349的博客
04-15 1322
跨域的产生：详细的就不写了，就单纯写为什么下面的案例会跨域，假如 3001端口请求3000端口段都的资源，就会产生跨域。跨域的产生是浏览器的问题（安全策略），所以，配置proxy也必然是针对浏览器的。配置proxy就能解决，是因为，增加一层 中间服务器，把请求发给中间服务器，服务器帮你发给 3000端口，当接收到3000端口返回数据后，中间服务器再帮发给3000端口。跟webpack的一样。webpack： 就是上面的。
webpack解决跨域（仅开发环境）
followly的博客
07-31 2304
在开发环境中，Webpack 可以结合开发服务器（如 webpack-dev-server）提供代理功能来解决开发过程中的跨域问题。但对于生产环境，由于 Webpack 主要是用于打包和构建前端资源，不直接处理服务器端请求，因此不能直接解决生产环境的跨域问题。注意，如果在代理配置中设置了changeOrigin为true，则在代理请求时会自动将请求头中的Host字段设置为代理目标的域名，这样就可以绕过浏览器的同源策略，实现跨域请求。Webpack 本身并不能直接解决生产环境的跨域问题。
webpack代理配置
最新发布
02-23
### Webpack代理配置详解 在开发环境中，Webpack Dev Server 提供了一个内置的HTTP服务器来托管静态资源并支持热更新等功能。当涉及到前后端分离的应用程序时，前端应用通常运行在一个本地服务上（比如`http://localhost:8080`），而后端API可能位于不同的域名或端口下（例如`http://localhost:3000/api`）。为了简化跨域请求处理，在这种情况下可以利用Webpack提供的代理功能。 #### 使用 `http-proxy-middleware` 通过引入第三方库`http-proxy-middleware`可以帮助更灵活地设置代理规则： ```javascript // webpack.config.js 或其他配置文件中 const { createProxyMiddleware } = require('http-proxy-middleware'); // 加载中间件包[^1] module.exports = { // ...其余配置项... devServer: { setupMiddlewares(middlewares, devServer) { if (!devServer) throw new Error('webpack-dev-server is not defined'); middlewares.push( createProxyMiddleware('/api', { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: {'^/api' : ''} // 可选：重写路径去掉前缀 }) ); return middlewares; } }, }; ``` 这段代码展示了如何使用`createProxyMiddleware()`方法创建一个新的代理实例，并将其添加到现有的中间件列表里。这里指定了目标URL(`target`)以及一些额外选项如改变源地址(`changeOrigin`)和路径重写规则(`pathRewrite`)。 #### 配置简单的代理映射 如果只需要简单地将某些特定模式下的请求转发给另一个服务器，则可以直接在`devServer.proxy`属性内定义相应的匹配规则而无需借助外部模块: ```javascript module.exports = { // ... devServer: { proxy: { '/api': 'http://localhost:3000' } } } ``` 此方式适用于大多数场景，默认会把所有以`/api`开头的请求都发送至指定的目标地址。 #### 复杂条件判断与自定义逻辑 有时候还需要根据不同类型的请求采取不同策略，这时可以通过编写回调函数来自定义行为： ```javascript module.exports = { // ... devServer: { proxy: { '/api': { target: 'http://localhost:3000', bypass(req, res, proxyOptions){ const acceptHeader = req.headers.accept || ''; if(acceptHeader.includes('text/html')){ console.log('Bypassing proxy for HTML requests...'); return '/index.html'; } return undefined; // 继续执行默认代理操作 } } } } } ``` 上述例子说明了怎样基于请求头信息决定是否绕过当前代理设置返回某个固定页面；如果不满足条件则继续按照常规流程进行代理转发[^2]。 #### 关键字触发的特殊代理机制 另外一种情况可能是希望仅针对含有特定字符串的关键字发起的请求做特别处理，这同样可以在`bypass`钩子里面实现： ```javascript module.exports = { //... devServer: { proxy: [{ context: ['/getonenet'], // 定义要拦截的路径模式 target: 'https://example.com/', secure: false, logLevel: 'debug', onProxyReq(proxyReq, req, res){ if(req.url.startsWith('/getonenet')){ proxyReq.path = `/customPath${req.url}`; // 修改实际访问路径 } } }] } } ``` 在这个片段中，每当遇到带有`/getonenet`关键字的请求都会被送往预设的目标站点，并且还可以进一步修改这些请求的具体参数[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值