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

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

根据以下配置,发现怎么都链接不了后端地址,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替换为空
      }
    }
  }

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

vscode 搭建STM32开发环境

1.需要软件 1.1 vscode 1.2 STM32CubeMX,这个不是必须的,我是为了方便生成STM32代码 2.vscode配置 2.1安装keil Assistant 2.2配置keil Assistant 3.STMCUBE生成个STM32代码 ,如果有自己的代码可以忽略 4.代码添加到vscode,并…

iPhone手机怎么恢复出厂设置(详解)

如果您的iPhone遇到了手机卡顿、软件崩溃、内存不足或者忘记手机解锁密码等问题,恢复出厂设置似乎是万能的解决方法。 什么是恢复出厂设置?简单来说,就是让手机重新变成一张白纸,将手机所有数据都进行格式化,只保留原…

无货源跨境电商购物平台快速搭建(微商城、小程序、APP、网站)

无货源跨境电商购物平台的快速搭建可以通过以下步骤完成,并且可以同时开发微商城、小程序、APP和网站以满足不同用户的需求。 第一步:需求分析 在搭建之前,需要对平台的需求进行详细的分析。包括用户需求、功能需求、技术需求等等。这一步是…

北航基于openEuler构建工业机器人操作系统,打造“开箱即用”的机器人基础软件平台

北京航空航天大学是国家“双一流”建设高校,以建设扎根中国大地的世界一流大学为发展目标。北京航空航天大学在机器人领域一直处于行业前沿,以其亮眼的成果和优秀的师资力量,成为国内机器人领域的重要参与者和建设者。机器人操作系统是机器人…

浅谈什么是 Spring Cloud,快速学习与使用案例(文末送书福利3.0)

文章目录 📋前言🎯什么是 Spring Cloud🎯快速入门 Spring Cloud🧩使用 Eureka 进行服务注册和发现 📝最后🎯文末送书📚内容介绍📚作者介绍 🔥参与方式 📋前言…

erp与crm的区别有哪些呢?两者之间有什么联系?

阅读本文您可以了解:1、crm系统的功能;2、erp系统的功能;3、crm系统和erp系统的区别 一、crm系统是什么 CRM系统是客户关系管理系统的缩写。它是一种用于帮助企业有效管理与客户关系相关的信息、活动和数据的软件工具或平台。 举个例子&…

【ArcGIS】经纬度数据转化成平面坐标数据

将点位置导入Gis中,如下(经纬度表征位置): 如何利用Gis将其转化为平面坐标呢? Step1 坐标变换 坐标变换,打开ArcToolbox,找到“数据管理工具”->“投影和变换”->“要素”->“投影”…

Fastjson 使用指南

文章目录 Fastjson 使用指南0 简要说明为什么要用JSON?用JSON的好处是什么?为什么要用JSON?JSON好处 1 常用数据类型的JSON格式值的范围 2 快速上手2.1 依赖2.2 实体类2.3 测试类 3 常见用法3.1 序列化操作核心操作对象转换为JSON串list转换J…

[C++]类与对象(下) -- 初始化列表 -- static成员 -- 友元 -- 内部类,一篇带你深度了解。

目录 1、再谈构造函数 1.1 构造函数体赋值 1.2 初始化列表 1.2.1 初始化列表的意义 1.3 explicit关键字 2、static成员 2.1 问题引入 2.2 特性 3、友元 3.1 友元函数 3.2 友元类 4、内部类 1、再谈构造函数 1.1 构造函数体赋值 在创建对象时,编译器通…

nginx(八十六)uri转义杂谈

一 关于nginx uri过往整理 HTTP1.1(四)URI HTTP1.1(五)URI编码 HTTP杂谈(三)URL特殊字符 以下涉及: 1) location 与$uri --> 路由匹配 --> 通过debug日志观察2) proxy_paas --> attach_url是否有,有是否是变量,决定透传给上游uri的形式3) $reque…

软件编程专业:探索计算机世界的奥秘

软件编程专业:探索计算机世界的奥秘 随着科技的飞速发展,计算机已经渗透到我们生活的方方面面。我们每天都在使用各种应用程序,比如社交媒体、游戏和电子邮件等,而这些应用程序背后的魔法都是由软件编程专业的人创造的。那么&…

SpringBoot 热部署

一、启动热部署 1.1 开启开发者工具 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><scope>runtime</scope><optional>true</optional> </dependency>…

5G用户逼近7亿,5G发展迈入下半场!

尽管普遍认为5G投资高峰期正在过去&#xff0c;但是从2023年上半年的情况来看&#xff0c;我国5G建设仍在衔枚疾走。 近日举行2023年上半年工业和信息化发展情况新闻发布会上&#xff0c;工信部人士透露&#xff0c;截至今年6月底&#xff0c;我国5G基站累计达到293.7万个&…

【数据分析】pandas (三)

基本功能 在这里&#xff0c;我们将讨论pandas数据结构中常见的许多基本功能 让我们创建一些示例对象&#xff1a; index pd.date_range(“1/1/2000”, periods8) s pd.Series(np.random.randn(5), index[“a”, “b”, “c”, “d”, “e”]). df pd.DataFrame(np.random.…

期权定价模型系列【1】—BSM通用式模型

这是期权定价模型专栏的第一篇文章&#xff0c;此专栏旨在分享一些期权定价模型&#xff0c;将会从最基础的BSM模型开始写起&#xff0c;逐步扩散到蒙特卡洛模拟、二叉树等数值法模型&#xff0c;以及跳跃扩散模型、随机波动率模型&#xff0c;神经网络模型等等。 如果你觉得有…

el-select与el-tree结合使用,实现select框下拉使用树形结构选择数据

使用el-select与el-tree&#xff0c;实现如下效果&#xff0c; 代码如下&#xff1a; 注意点&#xff1a;搜索input框的代码一点放在option上面&#xff0c;不要放在option里面&#xff0c;否则一点击搜索框&#xff0c;下拉框就会收起来&#xff0c;不能使用。 <el-select…

【BASH】回顾与知识点梳理(十七)

【BASH】回顾与知识点梳理 十七 十七. 什么是 Shell scripts17.1 干嘛学习 shell scripts自动化管理的重要依据追踪与管理系统的重要工作简单入侵检测功能连续指令单一化简易的数据处理跨平台支持与学习历程较短 17.2 第一支 script 的撰写与执行撰写第一支 script 17.3 撰写 s…

在家构建您的迷你聊天Chat gpt

推荐&#xff1a;使用 NSDT场景编辑器 助你快速搭建可编辑的3D应用场景 什么是指令遵循模型&#xff1f; 语言模型是机器学习模型&#xff0c;可以根据句子的前一个单词预测单词概率。如果我们向模型请求下一个单词&#xff0c;并将其递减地反馈给模型以请求更多单词&#xff…

Unity游戏源码分享-乐节奏休闲游戏源码 guitar hero 支持mobile

Unity游戏源码分享-乐节奏休闲游戏源码 guitar hero 支持mobile 完整版下载地址&#xff1a;https://download.csdn.net/download/Highning0007/88198766

代码反向生成时序图类图-Visual_Paradigm实践

目录 前言 一、Visual_Paradigm介绍 1、主界面介绍 2、功能简介 二、基于代码的序列图生成 1、新建VP项目工程 2、序列图反向生成 三、VP类图生成 1、生成主入口 四、数据ER模型生成 1、SQL脚本 2、ER反向生成 总结 前言 不知道作为研发的小伙伴们&#xff0c;在平时的…