打包发布后发现devServer的proxy依旧生效

时间: 2024-04-25 07:22:28 浏览: 130

Webpack devServer中的 proxy 实现跨域的解决

Webpack devServer 的 `proxy` 选项是一个非常实用的功能，它允许开发者在开发环境中轻松地解决跨域问题。在实际开发中，我们经常会遇到由于浏览器同源策略限制导致的跨域问题，这使得前端应用无法直接访问不同源的后端API。`proxy` 通过将前端的API请求转发到指定的服务器，从而绕过这些限制。让我们来看看如何在 `webpack.config.js` 文件中配置 `devServer` 以启用 `proxy`。在以下示例中，我们设置了 `proxy` 配置项，将所有以 `/test/*` 开头的请求转发到 `http://localhost`： ```javascript module.exports = { // ... devServer: { historyApiFallback: true, hot: true, inline: true, progress: true, port: 3000, host: '10.0.0.9', proxy: { '/test/*': { target: 'http://localhost', changeOrigin: true, secure: false } }, // ... }, // ... }; ``` 这里有几个关键参数： 1. **`/test/*`**：这是一个路径匹配规则，表示所有以 `/test/` 开头的请求都将被代理。 2. **`target`**：定义了代理的目标服务器地址，这里是 `http://localhost`。 3. **`changeOrigin`**：如果设置为 `true`，会改变 `Host` 头部的来源，使其看起来像是直接请求目标服务器，这对于处理某些服务器的认证机制很有帮助。 4. **`secure`**：默认情况下，如果目标服务器使用HTTPS，`secure` 必须设为 `true`。如果目标服务器使用HTTP，或者你希望在HTTPS下忽略证书验证，可以将其设为 `false`。当我们在前端代码中发起请求时，比如使用 `jQuery` 的 `$.ajax()` 或现代的 `fetch` API，我们只需提供相对路径，例如 `/test/testFetch/Login.php`。Webpack devServer 会自动将这个路径加上当前服务器的基路径，然后利用 `proxy` 设置将请求转发到目标服务器。 ```javascript // jQuery 示例 $.ajax({ url: '/test/testFetch/Login.php', type: 'post', data: { app_id: '13751313169', password: '123456', user_name: 'Nicholas' }, success: function(data) { console.log(data); } }); // Fetch 示例 async function testAsync() { const feeling = { app_id: '13751313169', password: '123456', user_name: 'Nicholas' }; const response = await fetch('/test/testFetch/Login.php', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(feeling) }); const data = await response.json(); console.log(data); } ``` `pathRewrite` 参数允许我们在代理请求时修改路径。例如，如果设置 `pathRewrite: {'^/api': ''}`，那么 `/api/some-resource` 将会被重写为 `some-resource`，并转发到目标服务器。然而，正确配置 `pathRewrite` 需要对正则表达式有良好的理解。 Webpack devServer 的 `proxy` 是一个强大的工具，可以帮助开发者在开发阶段轻松处理跨域问题，无需后端配合设置CORS（跨源资源共享）。只需简单配置，即可实现前端与任何服务器之间的通信，极大地提高了开发效率。

回答: 打包发布后发现devServer的proxy依旧生效的原因是，打包后的dist文件只包含了组件和其他资源，而没有包含代理服务器。因此，配置在vue.config.js中的devServer.proxy只在开发环境下生效，对于打包后的dist文件是无效的。所以，项目中的请求路径不完整导致无法访问到对应的资源。\[1\]\[2\]在你的情况下，你将代理地址改成了服务器地址，并执行了npm run build打包dist文件，但是这并不会影响到打包后的文件。如果你想在打包后的文件中生效代理，你需要在服务器端进行相应的配置。\[3\] #### 引用[.reference_title] - *1* *3* [Vue项目打包部署上线时devServer.proxy代理失效如何解决？使用nginx的proxy_pass 代理跨域转发](https://blog.csdn.net/qq_45890970/article/details/123654674)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Vue项目打包部署上线时devServer.proxy代理失效如何解决？使用nginx反向代理](https://blog.csdn.net/m0_67403076/article/details/125345850)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

阅读全文

打包发布后发现devServer的proxy依旧生效

相关推荐

详解Webpack-dev-server的proxy用法

详解webpack-dev-server使用http-proxy解决跨域问题

vue cli3 配置proxy代理无效的解决

解决vue中使用proxy配置不同端口和ip接口问题

vue cli构建的项目中请求代理与项目打包问题

Webpack与开发环境配置：DevServer的使用与优化

Docker中的负载均衡和服务发现

vue 打包后proxy地址不生效

devServer跨域

vue中使用axios打包发布nignx

vue项目打包后代理

友价免签约支付接口插件最新版

基于java的微信小程序跳蚤市场设计与实现答辩PPT.pptx

java程序员面试求职指南

akima-2019.1.1-cp34-cp34m-win32.whl.rar

aiohttp-3.8.1-cp311-cp311-win32.whl.rar

JSP基于SSM旅游景点预订html5网站毕业源码案例设计.zip

open3d-0.15.2-cp38-cp38-win-amd64.whl

【python毕业设计】基于Python的可视化学习系统（完整前后端源码）.zip

最新推荐

解决vue中使用proxy配置不同端口和ip接口问题

友价免签约支付接口插件最新版

基于java的微信小程序跳蚤市场设计与实现答辩PPT.pptx

java程序员面试求职指南

akima-2019.1.1-cp34-cp34m-win32.whl.rar

探索AVL树算法：以Faculdade Senac Porto Alegre实践为例

管理建模和仿真的文件

【ggplot2绘图技巧】：R语言中的数据可视化艺术

HAL库怎样将ADC两个通道的电压结果输出到OLED上？

小学语文教学新工具：创新黑板设计解析