如何在Vue3中配置SSE连接以通过代理？

Question

vue3 sse连接不走代理

问题代码：

this.eventSource = new EventSource(`/api/qa/sse/${resp.data}`)

vue.config.js相关配置

devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        // pathRewrite: { '^/api': '' },
      }
    }
  }

正常来说/api开头不应该走代理到3000端口吗，而实际网络请求还是8080端口

GET http://localhost:8080/api/qa/sse/14 401 (Unauthorized)了解此错误
qa.js:53 Uncaught Error: SSE连接错误
    at eventSource.onerror (qa.js:53:1)

手动把地址改为 http://localhost:3000 由于跨域访问不了

vue/cli 版本是 5.0
找到过相似问题：https://github.com/vuejs/vue-cli/issues/7348
但是他的是走代理连接不成功，我这里不走代理

Answer 1

OP需要提供一下请求失败的信息，在不修改SSE链接请求地址的情况下。如果不嫌麻烦可以把里两个请求的异常都贴出来。

---

按照OP你的 devProxy 配置是会走代理的，因为命中了规则。

但是感觉OP你没有理解devProxy代理的实现。比如说：

正常来说 /api 开头不应该走代理到 3000 端口吗，而实际网络请求还是 8080 端口

并不是OP你理解的这样，如果你在浏览器的devTools的 network 面板里面看，请求地址就还是你当前项目的 8080 端口，而不是你配置的转发目标 3000 端口。

因为代理的转发路径是这样的：

1. 客户端网页发起网络请求，请求到 localhost:xxx 你本地启动的HTTP服务上面；

2. 本地启动的HTTP服务去匹配请求的URL。

   • 如果有匹配到规则，从本地启动的HTTP服务上发起一个新的网络请求到配置的目标服务器，等待响应后转发响应结果回客户端。
   • 如果没有匹配到，就会返回404。

并不是说直接在浏览器的Network面板中查看时就会是目标地址。
代理转发的本质其实是开启一个转发的HTTP服务作为中转，使 客户端地址 和 网络请求目标地址 处于同域，从而规避掉浏览器中的跨域限制。