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 相一致。
以上就是Vue3 跨域配置失效了？如何排查问题？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2652942.html
