Vue3 + vite 解决跨域问题

GIS_宇宙

已于 2022-10-20 14:41:39 修改

阅读量1.2w

点赞数 7

CC 4.0 BY-SA版权

文章标签： javascript 前端 vue.js

于 2022-03-12 19:49:59 首次发布

本文链接：https://blog.csdn.net/qq_41003479/article/details/123448988

本文介绍如何在Vite项目中通过vite.config.js设置代理，解决API跨域问题，并提供axios使用示例。只需新建配置文件，重写路径并调整axios请求即可实现跨域请求数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Access-Control-Allow-Origin

在写代码的时候出现上述跨域问题

解决问题

在工程文件夹的根目录新建一个vite.config.js文件，写入代码：

module.exports = {
    proxy: { 
      '/api': {
        target: 'http://localhost:8090/',  //你要跨域访问的网址
        changeOrigin: true,   // 允许跨域
        rewrite: (path) => path.replace(/^\/api/, '') // 重写路径把路径变成空字符
      }
    }
}

然后在需要发送请求的文件中写,就可以跨域请求数据了：

let data = await axios.get('/api/')  //结构赋值

在vite.config.js文件中的’/api’ 可以改成任意你想要的名字，只要把它重写成空字符，就无所谓的，还是原来的网址。