axios+vite配置反向代理踩坑记录

aixos+vite配置反向代理跨域踩坑记录

​ 最近，实习中，一直在写公司的项目。因为公司的项目大多都已经将工程化的东西已经配置好了。导致我昨天自己写项目的时候配置工程化出错！其实，这是一个很简单的问题。之前熟练的时候能够很熟悉地配置，但昨天却配置了很长的时间，因此需要记录一下。

1.在vite中配置反向代理✨

​ 配置反向代理的原因是因为我们在开发的过程中常常会遇到跨域问题，但我们知道，服务器与服务器之间是不存在跨域问题的，在运行vue项目的时候，我们项目和本地服务器是在一个服务器下面，因此不会产生跨域，配置反向代理就是让我们自己的服务器去向目标服务器请求数据，这样就不会产生跨域了。但上线后，如果前后端不是放在一个服务器的话，这个时候我们就要配置我们的Nginx了。

vite.config.js

 server: {
    proxy: {
      '/api': {
        target: 'http://43.142.163.215:3000', // 代理的线上的接口地址
        // 如果要代理 websockets
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
        // rewrite: (path) => path.replace(`'/^\\' + VITE_VUE_APP_BASE_API + '/'`, '')
      }
    }

  },

这段代码的意思是凡是向/api开头的接口请求数据，我们都需要代理到服务器再去请求数据，目标服务器是target中所配置的选项。有些时候，我们实际的接口并没有/api，这个时候我们就需要重写。将/api替换掉/，这个时候就用到了rewrite属性。

2.配置aixos

这一步也就是昨天踩坑的第一步。axios在配置代理服务器后，就需要写目标服务器的地址了，只用写url就行。

错误示范

axios.get('http://43.142.163.215:3000/api').then((res)=>{})

正确示范

axios.get('/api/').then((res)=>{})

但在一般公司，后端都会有统一的开头路径，例如后台就会以/admin开头，前台就会以api开头。如果公司后端没有遵守这样的规范，我们就得手动地重写了。