vue3配置代理--[vite] http proxy error_[vite] http proxy error

问题

本地调试, 后端使用**http://localhost:8081作为接口地址, 报错 [vite] http proxy error**

问题分析

可能是localhost 被使用了。 Node.js 在 v17以下版本中会对DNS解析地址的结果进行重新排序。 当访问localhost时, 浏览器使用DNS来解析地址, 这个地址可能与Vite正在监听的地址不同。当地址不一致时。导致接口报错。

解决方案

后端不要使用localhost作为接口域名,配置一个虚拟域名或者使用127.0.0.1

vite.config.js 中配置代理, 解决跨域问题。

后端接口如果有统一的标识, 比如api的配置

vite.config.js

export default defineConfig({ 
  server: { // 中转服务器
    proxy: { // 通过代理实现跨域,搭理这个地址http://localhost:8081
      '/api': {  // 路径, 作为就是替换域名
        target: 'http://127.0.0.1:8081', // 表示要替换的服务端地址
        changeOrigin: true, // 表示开启代理, 允许跨域请求数据
        secure: false,  // 如果是https接口，需要配置这个参数 
      }
    }
  } 
})

释义: 如果前端请求带有/api的接口地址, 都会转发到http://127.0.0.1:8081这个服务端地址上面。
模板中请求示例

<template>
  <div>{{ store.state.msg }}</div>
  <p><button @click="updateMsg()">改变数据</button></p>
</template>
<script>
export default{
 inject:['store'],
 /\*\*
 \* fetch 原生js, 不是ajax的封装,是一种http数据请求的方式,es6中的语法 
 \*/
 mounted(){
 /\*\*
 \* fetch 返回promise对象
 \* 
 \* 跨域请求数据, 浏览器同源策略的保护机制, 通过proxy实现跨域请求数据
 \*/
 let url = '/api/tests' // 模板中直接写相对路径就可以
 fetch(url).then((res)=>{
 console.log(res.json())
 })
 },

 methods:{
 updateMsg:function(){
 this.store.updateMsg()
 }
 }
}
</script>

(*)后端接口如果没有统一的标识,自己定义一个, 然后重写再去掉

这样配置, 通用性更高一些。

vite.config.js

export default defineConfig({


### 文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。



个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

![](https://img-blog.csdnimg.cn/img_convert/3e0d5b0f6a97b823cc1ef22ff1a18191.png)



第二阶段:移动端开发技术

![](https://img-blog.csdnimg.cn/img_convert/fc21db0a800494796dc6408ce1486031.png)

第三阶段:前端常用框架

![](https://img-blog.csdnimg.cn/img_convert/644efd4ddd0f8d43535f1982ec0da6e4.png)



*   推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

*   大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。