vite跨域配置踩坑,postman链接后端接口正常,但是前端就是不能正常访问

news2024/11/16 21:30:15

问题一:怎么都链接不了后端地址

根据以下配置,发现怎么都链接不了后端地址,proxy对了呀。 仔细看,才发现host有问题

// 本地运行配置,及反向代理配置
  server: {
    host: '0,0,0,0',
    port: 80,
    // cors: true, // 默认启用并允许任何源
    // open: true, // 在服务器启动时自动在浏览器中打开应用程序
    //反向代理配置,注意rewrite写法,开始没看文档在这里踩了坑
    proxy: {// 本地开发环境通过代理实现跨域,生产环境使用 nginx 转发
      '/api': {
        target: 'http://localhost/8090', // 通过代理接口访问实际地址。这里是实际访问的地址。vue会通过代理服务器来代理请求
        changeOrigin: true,
        ws: true,  // 允许websocket代理
        rewrite: (path) => path.replace(/^\/api/, '') // 将api替换为空
      }
    }
  }

 这里是本地前端访问地址配置,不设置默认http://127.0.0.1:5173/都可以访问,但是如果设置了只有设置的 http://127.0.0.1:80/或者http://localhost:80/可以访问

    host: '0,0,0,0',
    port: 80,

问题来了:设置为port80,host:0,0,0,0或者host: '127.0.0.1',时,请求后端报404。不设置时就能正常访问。

原因:开发服务器选项 | Vite 官方中文文档

简单的说就是,设置为0000或者127.0.0.1:80可能监听的是其他服务端口,导致跨域失败。

指定服务器应该监听哪个 IP 地址。 如果将此设置为 0.0.0.0 或者 true 将监听所有地址,包括局域网和公网地址。以下时vite官网内容:

问题二:[vite] ws proxy error: Error: connect ECONNREFUSED 127.0.0.1:80 at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1159:16)

本来已经能成功访问了,但是后面又报错

15:47:05 [vite] ws proxy error:
Error: connect ECONNREFUSED 127.0.0.1:80 at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1159:16)

原因:发现代理的地址有问题target: 'http://localhost:8090'写成了target: 'http://localhost/8090',服了。可能之前访问成功也是因为改了这里

测试一下改回来:发现真的不是问题一那里的问题,噗,哈哈哈哈哈哈哈哈哈

 server: {
    host: '127.0.0.1',//设置为0000或者127.0.0.1:80可能监听的是其他服务端口,导致跨域失败
    port: 80,
    // cors: true, // 默认启用并允许任何源
    // open: true, // 在服务器启动时自动在浏览器中打开应用程序
    //反向代理配置,注意rewrite写法,开始没看文档在这里踩了坑
    proxy: {// 本地开发环境通过代理实现跨域,生产环境使用 nginx 转发
      '/api': {
        target: 'http://localhost:8090', // 通过代理接口访问实际地址。这里是实际访问的地址。vue会通过代理服务器来代理请求
        changeOrigin: true,
        ws: true,  // 允许websocket代理
        rewrite: (path) => path.replace(/^\/api/, '') // 将api替换为空
      }
    }
  }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/853179.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

进程通信常见方式

目录 通信通信概述 通信的主要方式 进程同步机制--低级进程通信 高级通信工具 共享存储器系统(Shared-Memory System) 管道(pipe)通信系统 客户机-服务器系统(Client-Server system)---套接字(Socket) 客户机-服务器系统(Client-Serv…

数字孪生技术的实用性究竟有多高?

数字孪生是将实际物理世界与数字虚拟世界相结合的创新方法,它为我们提供了一个全新的视角,带来了许多令人兴奋的前景。那么,数字孪生的实用性究竟有多高呢? 首先,数字孪生在工业领域展现出了巨大的实用潜力。通过在虚…

Oracle-创建PDB

Oracle-创建PDB 创建PDB的方式 从PDB$SEED新建PDB克隆已存在的PDB 本地PDB克隆到同一个CDB中将远程PDB克隆到CDB中将非CDB插入或克隆到CDB中通过插拔的方式创建PDB sql 命令语法 条件 CDB必须open并且read write模式连接CDB$ROOT 用户并且具有CREATEPLUGGABLEDATABASE系统权…

树状结构数据,筛选指定数据

问题描述: 应用场景和需求:对一个树状结构的数据,进行CRUD 时,想筛选出 树状结构数据中存在变动的部分。 操作步骤 准备需要的数据: 1.先拿到 你原来的树状结构数据 2.再筛选出 需要保留的数据集合id,也…

机器学习基础之《特征工程(4)—特征降维》

一、什么是特征降维 降维是指在某些限定条件下,降低随机变量(特征)个数,得到一组“不相关”主变量的过程 1、降维 降低维度 ndarry 维数:嵌套的层数 0维:标量,具体的数0 1 2 3... …

用了回不去的卷王机械键盘,看这些就够了

前几天出了一期不同价位鼠标推荐:外设圈彻底开卷,2023 下半年无脑入鼠标推荐表来了! 结果不少小伙伴儿留言,鼠标是有了,还缺一把趁手好用且高性价比的机械键盘,并强烈要求咱再出一期。 话不多说&#xff0…

Markdown格式说明

一、基本语法 1.1 标题 大标题 中标题 -----# 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 1.2 文本样式 *强调文本* _强调文本_**加粗文本** __加粗文本__标记文本~~删除文本~~> 引用文本H~2~O is是液体。2^10^ 运算结果是 1024。…

使用Python发送HTML格式的邮件

使用Python发送HTML格式的邮件 😇博主简介:我是一名正在攻读研究生学位的人工智能专业学生,我可以为计算机、人工智能相关本科生和研究生提供排忧解惑的服务。如果您有任何问题或困惑,欢迎随时来交流哦!😄 …

业务中如何过滤敏感词

在我们访问网站的时候,如果发现我们发布的内容有色情暴力的东西等等,会屏蔽掉,这种行为就是过滤敏感词。 从技术层面实现起来,其实比较简单,因为我们输入的内容就是一个大型的字符串,我们要调用某些api来判…

【Vue3】Teleport 传送组件

Teleport 组件是 Vue.js 3 中引入的特性之一&#xff0c;它允许将组件的内容传送&#xff08;teleport&#xff09;到当前组件之外的目标位置&#xff0c;这在处理复杂的布局、模态框等方案时非常有用。 A.vue <template><div class"dialog"><heade…

SQL server 异地备份数据库

异地备份数据库 1.备份服务器中设置共享文件夹 2.源服务器数据库中添加异地备份代理作业 EXEC sp_configure show advanced options, 1;RECONFIGURE; EXEC sp_configure xp_cmdshell, 1;RECONFIGURE; declare machine nvarchar(50) 192.168.11.10 --服务器IP declare pa…

设备固定资产管理系统

资产管理是企业经营和发展的基础&#xff0c;特别是设备资产管理。适当的设备资产管理可以有效地提升企业的经营效率&#xff0c;为提高核心竞争能力提供高效的前提。 固资及设备管理系统&#xff08;EAM&#xff09;它是一种有效的固定资产管理模式&#xff0c;可以帮助企业更…

分布式应用:Zabbix 自动发现与自动注册

目录 一、理论 1.Zabbix 自动发现 2.Zabbix 自动发现部署 3.Zabbix 自动注册 4.Zabbix 自动注册部署 二、实验 1.Zabbix 自动发现部署 2.Zabbix 自动注册部署 三、总结 一、理论 1.Zabbix 自动发现 &#xff08;1&#xff09;原理 zabbix 自动发现(对于 agent2 是被…

爱校对-校对软件的重要性:减少错别字和语法错误的尴尬

校对软件在减少错别字和语法错误方面发挥着重要的作用&#xff0c;帮助避免尴尬情况的发生。以下是校对软件的重要性所在&#xff1a; 1.提高专业形象&#xff1a;新闻稿件是传递信息和建立声誉的关键工具。若存在大量的错别字和语法错误&#xff0c;会严重影响读者对媒体机构或…

探究使用HTTP代理ip后无法访问网站的原因与解决方案

目录 访问网站的原理是什么 1. DNS解析 2. 建立TCP连接 3. 发送HTTP请求&#xff1a; 4. 服务器响应&#xff1a; 5. 浏览器渲染&#xff1a; 6. 页面展示&#xff1a; 使用代理IP后访问不了网站&#xff0c;有哪些方面的原因 1. 代理IP的可用性&#xff1a; 2. 代理…

webshell免杀项目-ByPassGodzilla(一)

哥斯拉WebShell免杀生成工具 项目地址&#xff1a; https://github.com/Tas9er/ByPassGodzilla ㊙️友情提示 如果您的网站被恶意插入此后门&#xff0c;说明了两个问题&#xff1a; 1.你的站被日麻了 2.我对您的Diao站没有任何兴趣&#xff0c;只是有的Diao毛用工具不改密…

用条件格式美化图表,同事赞叹你的高超技巧

在工作中&#xff0c;我们经常需要制作图表来展示数据和趋势&#xff0c;但普通的图表可能显得平淡无奇。然而&#xff0c;通过巧妙运用条件格式&#xff0c;我们可以为图表增添美感和可读性&#xff0c;让同事们对你的技巧赞叹不已。本文将为您介绍如何利用条件格式来美化图表…

使用ResponseBodyAdvice做分页处理

目录 父pom文件 pom文件 配置文件 MyResponseBodyAdvice ResponseDto MyBatisConfig UsersController UsersMapper UserMapper.xml 结果 父pom文件 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/PO…

【JAVA】七大排序算法(图解)

稳定性&#xff1a; 待排序的序列中若存在值相同的元素&#xff0c;经过排序之后&#xff0c;相等元素的先后顺序不发生改变&#xff0c;称为排序的稳定性。 思维导图&#xff1a; &#xff08;排序名称后面蓝色字体为时间复杂度和稳定性&#xff09; 1.直接插入排序 核心思…

E1. PermuTree (easy version) Codeforces Round 890 (Div. 2) E1

题目大意&#xff1a; 给出一个n个点的树&#xff0c;所有点权a[i]构成一个n的排列&#xff0c;点权可以任意分配给点&#xff0c;问最多有多少对u,v满足a[u]<lca(a[u],a[v])<a[v] 2<n<5000 思路&#xff1a;首先&#xff0c;如果两个点的lca是他俩其中之一&…