小能豆

vue3+vite跨域404问题

javascript

很奇怪,之前vite里是这样配置的:

‘/api’: {
target: ‘http://www.aaaa.cn/jjy',
changeOriange: true,
pathRewrite: {
‘^/api’: ‘’
}
},

然后调用的接口是这样的:
http://www.aaaa.cn/jjy/api/jiekou

axios二次封装是这样的:
export function aaaa(params) {
return service({
url: ‘/api/jiekou’,
method: ‘post’,
data: params,
})
}

//////////////////////////以上都没有问题,直到出现下面这个接口:
http://www.aaaa.cn/jjy/api/admin/jiekou1

这个接口的封装路径是
url: ‘/api/admin/jiekou1’,

然后调用这个接口的时候就开始报404..............

后来网上查了一下,又在vite配置里加了一句path路径的
rewrite: (path) => path.replace(/^/api/, ‘’)

然后,原先报404的接口能用了,原先能用的接口全报404,,,


阅读 32

收藏
2024-07-02

共1个答案

小能豆

根据你描述的情况,似乎在配置 Vite 时出现了一些混淆和错误。让我们逐步检查和修正配置,以确保接口路径重写和代理设置正确生效。

1. Vite 配置文件

首先,确保你的 Vite 配置文件中针对代理和路径重写的设置正确。通常,这些配置应该放在 vite.config.js 或者 vite.config.ts 文件中,具体如下:

// vite.config.js or vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://www.aaaa.cn/jjy',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
});

2. Axios 封装

确保 Axios 的封装在调用接口时正确使用了代理配置。根据你的描述,/api/jiekou/api/admin/jiekou1 是两个不同的接口路径,需要正确设置代理。

// axios 封装文件
import axios from 'axios';

const service = axios.create({
  baseURL: '/', // 或者设置为空字符串,因为代理已经在 Vite 中配置了
  timeout: 5000, // 请求超时时间
});

export function aaaa(params) {
  return service({
    url: '/api/jiekou', // 正确设置基础路径,代理会自动转发到 target + '/api/jiekou'
    method: 'post',
    data: params,
  });
}

// 调用 /api/admin/jiekou1 接口的示例
export function adminJiekou1(params) {
  return service({
    url: '/api/admin/jiekou1', // 同样要正确设置基础路径
    method: 'post',
    data: params,
  });
}

3. 确保路径重写和代理设置正确

  • 路径重写 (rewrite): 确保在 Vite 的配置中,rewrite 函数正确移除了路径中的 /api 前缀,以便代理能够正确识别和转发请求。
  • 代理配置 (proxy): 确保 proxy 配置正确指向目标服务器,并设置了 changeOrigin: true 来处理跨域请求。

4. 注意事项

  • 重启服务: 在修改 Vite 配置文件后,确保重启 Vite 服务器以使更改生效。
  • 路径匹配: 在 Axios 封装中,确保每个接口请求的路径前缀与代理配置中的路径匹配,这样代理才能正确转发请求。

通过以上步骤,你应该能够正确配置 Vite 和 Axios,使得你的接口能够按预期工作,避免 404 错误和其他路径问题。

2024-07-02