Vite+Vue 用axios发送请求时踩了一些坑，记录一下

原创已于 2025-01-02 16:31:51 修改 · 1.1k 阅读 ·

大模型引用 1 次

本内容遵循CC 4.0 BY-SA版权协议

Mahmut0205

关注

标签

#vue.js #前端 #javascript

分类前端开发

于 2024-11-26 15:00:42 首次发布

无法导入axios 。 Failed to resolve import “axios” from “src/App.vue”. Does the file exist?
解决：通过npm install axios --save安装axios后，需要重启开发服务器。
（可选，我没做这一步就成功了）如果上述步骤都没有解决问题，可以尝试清除 Vite 的缓存并重新启动开发服务器：

rm -rf node_modules/.vite
npm run dev

跨域错误。 Access to XMLHttpRequest at ‘xxx’ from origin ‘http://localhost:5173’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
解决：使用代理 (Proxy) 来绕过 CORS 问题。
Vite 提供了一个简单的代理功能，可以在 vite.config.js 中进行配置：
（1）在 vite.config.js 中添加代理配置：

// vite.config.js
export default {
  server: {
    proxy: {
      '/api': {
        target: 'https://api.example.com', // 你要访问的 API 的地址
        changeOrigin: true,
        secure: false, // 如果是 HTTPS 请求，设置为 false 可以避免一些证书错误
        rewrite: (path) => path.replace(/^\/api/, '')  // 你可以选择重写路径
      }
    }
  }
}

（2）然后，在你的 Vue 代码中，修改请求的路径，使用代理前缀，例如：

axios.get('/api/your-endpoint')  // 现在它会被代理到 https://api.example.com/your-endpoint

** '/api/'是路由开头（具体名称是服务端定的，或者重写），通过这个来区分哪个请求需要走代理