Vue3 跨域配置失效了?如何排查问题?
vue3 跨域配置失效了?
在使用 vue3 进行跨域操作时,有时配置后的跨域似乎并不生效。以下我们根据常见的配置场景,逐一排查潜在的问题。
配置内容
.env
api_url=http://172.16.101.103:5000
config.ts
import { proxy } from 'vue-router'; import { createProxyMiddleware } from 'http-proxy-middleware'; const serverProxy = createProxyMiddleware({ target: process.env.API_URL, changeOrigin: true, pathRewrite: { '^/interface': '/' } }); export const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), base: import.meta.env.VITE_BASE, routes, scrollBehavior, middleware: 'server-middleware' }); router.beforeEach((to, from, next) => { if (to.meta.middleware) { const middleware = router.getMiddleware(to.meta.middleware); if (!middleware) { return next(); } const ctx: MiddlewareContext = { from, next, router }; middleware.call(to.meta.middleware, ctx); } else { next(); } }); router.use(async (ctx, next) => { await serverProxy(ctx.res, ctx.req, next); });
常见问题
在上述配置中,可能会存在以下问题:
-
是否配置了 baseurl?
-
createproxy 方法是否正确?
确认 createproxy 方法是否按预期运行,并返回正确的代理结果。
-
server.proxy 配置是否正确?
检查你的 server.proxy 规则是否匹配 api 请求的实际 url。如果第一个规则无法匹配,请尝试将其修改为 /。
-
baseurl 中的端口与 vite_port 一致吗?
确保 axios baseurl 中的端口与 .env 中的 vite_port 相一致。
以上就是Vue3 跨域配置失效了?如何排查问题?的详细内容,更多请关注硕下网其它相关文章!