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 相一致。