网站网页设计制作教程,外包网站都有哪些,网站改版案例,衡阳网站优化外包首选aixosvite配置反向代理跨域踩坑记录
最近#xff0c;实习中#xff0c;一直在写公司的项目。因为公司的项目大多都已经将工程化的东西已经配置好了。导致我昨天自己写项目的时候配置工程化出错#xff01;其实#xff0c;这是一个很简单的问题。之前熟练的时候能够很熟…aixosvite配置反向代理跨域踩坑记录
最近实习中一直在写公司的项目。因为公司的项目大多都已经将工程化的东西已经配置好了。导致我昨天自己写项目的时候配置工程化出错其实这是一个很简单的问题。之前熟练的时候能够很熟悉地配置但昨天却配置了很长的时间因此需要记录一下。
1.在vite中配置反向代理✨
配置反向代理的原因是因为我们在开发的过程中常常会遇到跨域问题但我们知道服务器与服务器之间是不存在跨域问题的在运行vue项目的时候我们项目和本地服务器是在一个服务器下面因此不会产生跨域配置反向代理就是让我们自己的服务器去向目标服务器请求数据这样就不会产生跨域了。但上线后如果前后端不是放在一个服务器的话这个时候我们就要配置我们的Nginx了。
vite.config.js server: {proxy: {/api: {target: http://43.142.163.215:3000, // 代理的线上的接口地址// 如果要代理 websocketschangeOrigin: 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开头。如果公司后端没有遵守这样的规范我们就得手动地重写了。
