React 设置默认打开浏览器和端口,反向代理跨域

如果是通过creat-react-app构建的项目,以下操作都是在package.json中设置的

设置默认打开浏览器及端口

需要设置scriptsstart选项

  • 设置默认打开谷歌浏览器
"start": "set BROWSER=chrome&& react-scripts start"
  • 设置关闭默认打开浏览器
"start": "set BROWSER=none&& react-scripts start"
  • 设置默认打开端口
"start": "set PORT=8080&& react-scripts start"

注意: &&之前不能有空格

可以合并使用,如默认不打开浏览器和设置端口

"start": "set BROWSER=none&& set PORT=8080&& react-scripts start"

在这里插入图片描述

设置反向代理跨域

需要在package.json中添加proxy

如果只代理一个域,如下例所示

"proxy": "http://127.0.0.1:8088"

在这里插入图片描述

如果有多个域代理,如下例所示

"proxy": {
  "/api1": {
    "target": "http://127.0.0.1:8088",
    "changeOrigin":true
  },
  "/api2":{
    "target":"http://127.0.0.1:8090",
    "changeOrigin":true
  }
}
### VSCode 反向代理插件推荐 在开发过程中,如果需要通过反向代理来解决问题或者简化请求流程,可以选择一些适合的 VSCode 插件。以下是几个常用的插件及其功能介绍: #### 1. **Live Server** `Live Server` 是一款非常流行的实时预览工具,它不仅可以用于启动本地服务器,还可以通过简单的配置实现基本的反向代理需求[^1]。 - 功能特点:支持 HTML 文件的即时刷新静态资源服务。 - 使用场景:适用于前端项目的快速调试以及 Vue 或 React 打包后的文件预览[^3]。 虽然 Live Server 并不是专门为反向代理设计的,但它可以通过修改 `settings.json` 来完成部分代理任务。例如,在 JSON 中添加以下内容: ```json { "liveServer.settings.CustomBrowser": "", "liveServer.settings.port": 5500, "liveServer.settings.host": "localhost", "liveServer.settings.mount": [ ["", "/"] ], "liveServer.settings.proxy": { "target": "http://example.com/api", "changeOrigin": true, "pathRewrite": { "^/api" : "" } } } ``` #### 2. **Proxyman (REST Client & API Testing Tool)** 尽管 Proxyman 主要是一款 REST 客户端工具,但它也提供了强大的拦截转发能力,能够作为临时性的反向代理解决方案[^4]。 - 功能特点:支持 HTTP 请求捕获、重写 URL 响应数据。 - 使用方法:安装后可通过其内置界面定义规则并绑定到特定端口上。 对于更复杂的网络环境(比如需要设置全局代理才能访问外部互联网的情况),可以在终端执行如下命令以确保 VSCode 能正常工作: ```bash export http_proxy=http://<proxy_host>:<proxy_port> export https_proxy=http://<proxy_host>:<proxy_port> ``` #### 3. **HTTP Requester** 这是一个专注于处理 HTTP 请求的小型扩展程序,允许开发者轻松发送 GET/POST 等类型的请求,并且可以自定义目标地址。某些情况下也可以充当简易版的中间层来进行流量路由管理[^2]。 示例代码片段展示如何调用远程接口并通过指定参数构建查询字符串: ```javascript const axios = require('axios'); async function fetchUserData() { try { const response = await axios.get('http://localhost:8080/user', { params: { id: '123' } }); console.log(response.data); } catch (error) { console.error(error); } } fetchUserData(); ``` --- ### 总结 以上提到的几款插件各有侧重领,具体选择取决于实际应用场景个人偏好。如果是单纯为了测试目的而搭建小型代理机制的话,那么像 Live Server 这样的轻量级选项可能就足够满足日常所需;而对于那些涉及复杂业务逻辑或是频繁变动的需求而言,则建议考虑更加专业的第三方应用或框架配合使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值