谷歌浏览器设置反向代理

This is not a fix for production or when application has to be shown to the client, this is only helpful when UI and Backend development are on different servers and in production they are actually on same server. For example: While developing UI for any application if there is a need to test it locally pointing it to backend server, in that scenario this is the perfect fix. For production fix, CORS headers has to be added to the backend server to allow cross origin access.

The easy way is to just add the extension in google chrome to allow access using CORS.

(https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en-US)

Just enable this extension whenever you want allow access to no 'access-control-allow-origin'header request.

Or

In Windows, paste this command in run window

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

this will open a new chrome browser which allow access to no 'access-control-allow-origin'header request.

### Vue 项目在谷歌浏览器控制台不显示请求接口的原因分析 在 Vue 项目中,如果发现谷歌浏览器的开发者工具控制台未显示请求接口的信息,可能涉及以下几个原因: #### 1. 浏览器缓存的影响 当谷歌浏览器的开发者工具被启用时,默认情况下可能会自动启用了“Disable cache (while DevTools is open)”功能。这可能导致某些请求行为异常,例如部分接口返回错误状态码或未能正确加载资源[^1]。 #### 2. 接口理配置问题 Vue CLI 提供了一个内置的 `devServer.proxy` 配置项用于处理跨域请求。如果该配置存在误配或者未适当地匹配目标地址,则可能出现接口调用失败的情况。即使接口本身无误,也可能因为设置不当而无法正常展示请求日志。 #### 3. 生产环境下的源映射禁用 在生产环境中,为了优化性能和安全性,通常会在 `vue.config.js` 文件中将 `productionSourceMap` 设置为 `false`。这一操作虽然减少了打包体积并提升了运行效率,但也意味着调试信息会被隐藏,进而影响到开发者工具中的网络请求可视化效果[^3]。 --- ### 解决方案 以下是针对上述问题的具体解决方案: #### 方法一:调整浏览器缓存策略 确保关闭了开发者工具中的“Disable cache”选项。可以通过以下步骤实现: 1. 打开谷歌浏览器的开发者工具 (`F12`); 2. 切换至 **Network** 标签页; 3. 取消勾选左侧顶部的 “Disable cache (while DevTools is open)” 复选框。 此更改能够有效防止由于强制刷新机制引发的请求丢失现象。 #### 方法二:验证并修正 devServer.proxy 的配置 检查项目的根目录下是否存在 `vue.config.js` 文件以及其中关于 `proxy` 的定义是否合理。一个典型的例子如下所示: ```javascript module.exports = { devServer: { proxy: { '/api': { // 将以 /api 开头的路径转发给指定的目标服务器 target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/api': '' } // 如果需要重写 URL 路径可加入此项 } } } }; ``` 确认以上参数均按照实际需求进行了适当修改后再重新启动服务测试连接状况。 #### 方法三:临时恢复 source map 功能以便于调试 尽管正式上线前建议关闭 Source Map 来保护知识产权并提高应用表现力,但在开发阶段还是有必要保留它来辅助诊断潜在缺陷。因此可以在本地环境下暂时允许生成这些附加数据结构: 编辑 `vue.config.js` 添加如下内容即可完成设定: ```javascript module.exports = { productionSourceMap: process.env.NODE_ENV === 'development' ? true : false } ``` 这样做的好处在于既不影响最终交付版本的质量又能满足日常编码期间对于详尽馈的需求。 --- ### 总结 综上所述,造成 Vue 应用程序在 Google Chrome 中看不到 API 调用记录的主要因素包括但不限于浏览器端内存管理特性干扰、后端网关规则冲突以及前端构建流程约束等方面。通过针对性地采取措施如调节缓存开关状态、精炼反向代理逻辑或是灵活运用 sourcemap 工具链等手段均可显著改善此类体验不佳的现象。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值