vue3 借助vite配置了proxy代理情况,查看真实的接口调用地址方法

参考 https://blog.csdn.net/weixin_43606158/article/details/132436745

在浏览器查看请求头和响应头发现只有代理前的url,没有显示代理后的路径

  • vite.config.ts
    server: {
      proxy: {
        [env.VITE_APP_BASE_API]: {
          target: env.VITE_SERVE, //获取数据的服务器地址设置
          changeOrigin: true, //需要代理跨域
          rewrite:(path)=>path.replace(/^\/api/,''),// 路径重写 不要api的意思
          bypass(req, res, options) {
            //@ts-ignore
            const proxyUrl = new URL(options.rewrite(req.url) || '',(options.target)as string)?.href || '';
            console.log(proxyUrl);
            req.headers['x-req-proxyUrl'] = proxyUrl
            res.setHeader('x-res-proxyUrl',proxyUrl)
          },
        }
      }
    }

在这里插入图片描述

  • 在控制台的header中就能查看到了
    在这里插入图片描述
  • 补充一下这个完整路径的由来

登陆按钮在login/index.vue中,点击后的回调函数里 调用pinia仓库(user仓库)提供的登录接口userLogin,同时传递数据过去。

仓库中的userLogin,是调用了api接口的方法

api接口使用的axios是经过二次封装之后的,axios有基本路径baseURL(源自env.development),以及请求路径(仓库调用时传参)。

此时的路径是/api/user/login。发送请求时,通过vite代理,在前面加上env.VITE_SERVE,同时rewrite。

Vue3 中,如果你想要通过 Vite 配置文件 `vite.config.ts` 来代理 WebSocket 连接,Vite 提供了一个 `serverMiddleware` 功能,允许你在服务器中间件中设置自定义的请求处理。对于 WebSocket 的代理,你可以创建一个处理 WebSocket 连接的函数,并将其添加到 `viteServer.ws` 数组中。 以下是一个简单的示例,展示如何在 `vite.config.ts` 中配置 WebSocket 代理: ```typescript import { createServer } from 'http' import { createVueApp } from 'vue' import App from './App.vue' const app = createVueApp(App) // 创建 WebSocket 代理函数 async function wsProxy(ws: WebSocket, req: any) { // 如果需要的话,可以在这里对请求做额外的处理 // 比如检查是否已经登录、设置WebSocket路径等 ws.url = '/your-backend-websocket-endpoint'; // 设置代理的目标URL await ws.handshake(req) ws.on('message', async (message) => { // 处理接收到的消息 console.log(`Received message: ${message}`) try { const response = await yourBackendAPI(message); ws.send(response); // 发送回应给客户端 } catch (error) { ws.terminate(); } }); ws.on('close', () => { console.log('WebSocket connection closed') }); } // Vite server 配置 export default defineConfig({ build: {}, server: { middleware: [ { path: /^\/ws/, // 匹配所有以/ws开头的URL handler: createServer((req, res) => { const ws = new WebSocket(req.url.replace(/^ws:/i, 'wss:' if process.env.NODE_ENV === 'production' else 'ws:')); // 使用ws或wss取决于生产环境 wsProxy(ws, req); ws.pipe(res); ws.on('upgrade', (ws) => wsProxy(ws, req)); }), }, ], }, plugins: [], }) ``` 在这个例子中,`wsProxy` 函数会在客户端尝试连接WebSocket时被调用,它会将连接升级并转发到指定的后台WebSocket端点。记得替换 `/your-backend-websocket-endpoint` 为实际的WebSocket服务地址
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值