Vite+Vue项目中第三方数据获取的CORS问题解决方法

因为你无法修改fetchWikiData函数内的请求地址，这里提供两个可行的解决思路：

方法一：全局拦截Fetch+Vite代理配置 #

这是开发环境下最通用的方案，通过重写全局Fetch方法替换请求地址，配合Vite代理转发请求：

1. 配置Vite代理
   在vite.config.js（或.ts）中添加代理规则：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      // 定义代理路径
      '/fandom-proxy': {
        target: 'https://leagueoflegends.fandom.com',
        changeOrigin: true,
        // 重写路径，把代理路径替换成目标接口路径
        rewrite: (path) => path.replace(/^\/fandom-proxy/, '/api.php')
      }
    }
  }
})

2. 全局重写Fetch方法
   在Vue应用的入口文件（如main.js/main.ts）中，拦截Fetch请求并替换地址：

// 保存原始Fetch方法
const originalFetch = window.fetch

// 重写Fetch
window.fetch = async (url, options) => {
  // 匹配函数内固定的请求地址，替换为代理路径
  if (url === 'https://leagueoflegends.fandom.com/api.php') {
    url = '/fandom-proxy'
  }
  return originalFetch(url, options)
}

// 之后正常挂载Vue应用
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

这样fetchWikiData发起的请求会被自动转发到代理地址，由Vite处理跨域问题。

方法二：开发环境临时用浏览器插件 #

如果只是开发阶段临时测试，可以安装浏览器的CORS允许插件（如Allow CORS: Access-Control-Allow-Origin），直接绕过浏览器的CORS校验。但注意这个方法仅适合开发，生产环境不能依赖插件。

生产环境补充说明 #

如果要部署到生产环境，建议在你的后端服务器（如Nginx）配置反向代理，将前端请求转发到https://leagueoflegends.fandom.com/api.php，避免前端直接跨域请求。例如Nginx配置示例：

location /fandom-proxy {
  proxy_pass https://leagueoflegends.fandom.com/api.php;
  proxy_set_header Host leagueoflegends.fandom.com;
}

同时前端的Fetch重写逻辑可以保留，或者在生产环境构建时通过环境变量切换地址。

内容的提问来源于stack exchange，提问作者Sancho Pansa