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？
确保你的 axios 或其他 http 库已配置了 baseurl，与 .env 中的 api_url 相匹配。
-
createproxy 方法是否正确？
确认 createproxy 方法是否按预期运行，并返回正确的代理结果。
-
server.proxy 配置是否正确？
检查你的 server.proxy 规则是否匹配 api 请求的实际 url。如果第一个规则无法匹配，请尝试将其修改为 /。
-
baseurl 中的端口与 vite_port 一致吗？
确保 axios baseurl 中的端口与 .env 中的 vite_port 相一致。
