Vue3 跨域配置失效了?如何排查问题?

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);
});

常见问题

在上述配置中,可能会存在以下问题:

  1. 是否配置了 baseurl?

    确保你的 axios 或其他 http 库已配置了 baseurl,与 .env 中的 api_url 相匹配。

  2. createproxy 方法是否正确?

    确认 createproxy 方法是否按预期运行,并返回正确的代理结果。

  3. server.proxy 配置是否正确?

    检查你的 server.proxy 规则是否匹配 api 请求的实际 url。如果第一个规则无法匹配,请尝试将其修改为 /。

  4. baseurl 中的端口与 vite_port 一致吗?

    确保 axios baseurl 中的端口与 .env 中的 vite_port 相一致。

以上就是Vue3 跨域配置失效了?如何排查问题?的详细内容,更多请关注硕下网其它相关文章!