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

自学几个月前端，为什么感觉什么都没学到？？

这种现象在很多的初学者和自学前端的同学中是比较的常见的。

因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。

最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。

很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。

这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。

但是真的是这样的吗？非也，因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线，你可以参考。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。

所以学习编程一定要注重实践操作，练习敲代码的时间一定要多余看视频的时间。

跨域请求数据, 浏览器同源策略的保护机制, 通过proxy实现跨域请求数据; 如果直接postman请求是不会报错的, vue3报错是因为经过浏览器了, 数据其实返回了, 但是别浏览器的同源策略屏蔽了。

问题

本地调试, 后端使用**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>

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

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

最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中…(img-ONAdyvIF-1715833171841)]

[外链图片转存中…(img-yal0PTwc-1715833171842)]