版本信息

"vue": "^3.4.37""vite": "^5.4.1"

跨域问题是前后端分离项目遇到的很常见的问题，跨域请求因浏览器安全策略会被禁止，浏览器控制台会打印类似下面的消息。

Access to fetch at 'http://127.0.0.1:5000/select-move/predict' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

如果使用vue+vite组合的项目可以通过在vite.config.ts中添加server.proxy代理来实现跨域访问，原理上就是增加一个代理服务，由代理服务去请求真实的地址，这样就可以规避浏览器跨域的问题了。下面是一个示例配置，意思就是当访问/select-move开头的请求时，由代理去转发到真实的target配置的服务器中，path路径保持不变。

export default defineConfig({ plugins: [vue()], server: { proxy: { '/select-move': { // 匹配/select-move开头的请求 target: 'http://127.0.0.1:5000', // 转发的目标服务器 changeOrigin: true, // 允许跨域 } }, },})

代理配置完成后，还有可能出现最终请求并不成功，查来查去也找不到原因，看起来就是代理没有生效。这里告诉大家一个排查的方法，就是在开启npx vite --debug的debug选项，这样代理请求的真实服务器地址、path路径都会打印出来，具体是什么原因导致的很轻松地就能找到，如果确信代理的配置没有问题的话，还可能是后端接口请求参数、路径等不正确导致接口返回报错了。