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替换为空}}}

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

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

相关文章

爆肝整理,性能测试方法与关键指标以及瓶颈定位思路,一篇贯通...

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 性能测试方法 1、…

Python编程实现百度AI开放平台的接口对接方法,详解和实践指南

Python编程实现百度AI开放平台的接口对接方法,详解和实践指南 引言 百度AI开放平台提供了丰富的人工智能接口,包括语音识别、图像识别、自然语言处理等功能。本文将通过Python编程,详解如何对接百度AI开放平台的接口,并提供实际代码示例。准备工作 在开始之前,我们需要先完…

智能家居(1)---工厂模式实现灯光控制(继电器组)以及火灾报警模组的封装

采用工厂模式以面向对象的方式来封装各种设备模块&#xff0c;方便整合项目以及后期的维护和扩展 mainPro.c&#xff08;主函数&#xff09; #include <stdio.h> #include "controlDevice.h"struct Devices *pdeviceHead NULL; //设备工厂链…

抓包工具Fiddler下载与安装

一、Fiddler介绍 1.Fiddler简介 Fiddler 是一款免费、灵活、操作简单、功能强大的 HTTP 代理工具&#xff0c;是目前最常用的 HTTP 抓包工具之一。可以抓取所有的 HTTP/HTTPS 包、过滤会话、分析请求详细内容、伪造客户端请求、篡改服务器响应、重定向、网络限速、断点调试等…

数据结构刷题训练:队列实现栈

目录 前言 1. 题目&#xff1a;使用队列实现栈 2. 思路 3. 分析 3.1 创建栈 3.2入栈 3.3 出栈 3.4 栈顶数据 3.5 判空和 “ 栈 ” 的销毁 4. 题解 总结 前言 我们已经学习了栈和队列&#xff0c;也都实现了它们各自的底层接口&#xff0c;那么接下我们就要开始栈和队列的专项刷…

go内存管理机制

golang内存管理基本是参考tcmalloc来进行的。go内存管理本质上是一个内存池&#xff0c;只不过内部做了很多优化&#xff1a;自动伸缩内存池大小&#xff0c;合理切割内存块。 基本概念&#xff1a; Page&#xff1a;页&#xff0c;一块 8 K大小的内存空间。Go向操作系统申请和…

2.Model、ModelMap和ModelAndView的使用详解

1.前言 最近SSM框架开发web项目&#xff0c;用得比较火热。spring-MVC肯定用过&#xff0c;在请求处理方法可出现和返回的参数类型中&#xff0c;最重要就是Model和ModelAndView了&#xff0c;对于MVC框架&#xff0c;控制器Controller执行业务逻辑&#xff0c;用于产生模型数据…

Spring Cloud构建微服务断路器介绍

什么是断路器 断路器模式源于Martin Fowler的Circuit Breaker一文。“断路器”本身是一种开关装置&#xff0c;用于在电路上保护线路过载&#xff0c;当线路中有电器发生短路时&#xff0c;“断路器”能够及时的切断故障电路&#xff0c;防止发生过载、发热、甚至起火等严重后果…

【Redis】使用Docker镜像配置集群时的Operation timed out问题

不知道有没有小伙伴跟我一样是使用的Docker镜像进行Redis集群案例模拟的&#xff08;三台虚拟机确实带不动 &#xff09;&#xff0c;然后我遇到了一个问题&#xff1a;Could not connect to Redis at 172.17.0.2:6379: Operation timed out 172.17.0.2是我其中一个Redis实例的…

如何测试Linux磁盘的读写速度

在Linux系统中也有很多命令可以测试硬盘的读写速度指标。以下是几个常用命令&#xff08;注意&#xff1a;在执行测试命令之前&#xff0c;请务必备份数据以避免数据丢失&#xff01; 1、dd 命令 首先挂载磁盘 mount /dev/sdb /testdd 命令可用于进行硬盘读写速度测试。 例…

uniapp踩坑之项目:判断字符串长度自动调整选项卡宽度

利用动态:class来判断字长调整选项卡uni-data-select 宽度 //html <view><view style"width:100%" :class"checkLength(text)>4 ? textexplode:textshrink"><uni-data-select v-model"value" :localdata"rangeTag"…

android 开发中常用命令

1.反编译 命令&#xff1a;apktool d <test.apk> -o <folderdir> 其中&#xff1a;test.apk是待反编译文件的路径&#xff0c;folderdir是反编译后的文件的存储位置。 apktool d -f <test.apk> -o <folderdir> 注意&#xff1a;如果dir已经存在&am…

从零学算法34

34.给你一个按照非递减顺序排列的整数数组 nums&#xff0c;和一个目标值 target。请你找出给定目标值在数组中的开始位置和结束位置。 如果数组中不存在目标值 target&#xff0c;返回 [-1, -1]。 你必须设计并实现时间复杂度为 O(log n) 的算法解决此问题。 示例 1&#xff1…

React Native 在高IOS版本下无法显示图片的问题处理

图片在低ios版本下可以看到图片&#xff0c;在高版本ios下显示不了图片 直接上解决方法 找文件 /node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m 修改源码 原代码 if (_currentFrame) {layer.contentsScale self.animatedImageScale;layer.contents…

php中nts和ts

PHP语言解析器:官方提供了2种类型的版本&#xff0c;线程安全(TS)版和非线程安全(NTS)版 TS: TS(Thread-Safety)即线程安全&#xff0c;多线程访问时&#xff0c;采用了加锁机制&#xff0c;当一个线程访问该类的某个数据时进行数据加锁保护&#xff0c;其他线程不能同时进行访…

您的网站不应该只提供一套通用 API

后端应该提供两套 API&#xff0c;一套是外部使用的通用 API&#xff0c;服务特定的数据&#xff0c;另一套是自家使用的应用 API&#xff0c;服务特定的页面。 在当今的web开发中&#xff0c;构建一个提供JSON服务的后端和一个渲染应用程序的前端是很流行的。我不太喜欢&…

【Sklearn】基于决策树算法的数据分类预测(Excel可直接替换数据)

【Sklearn】基于决策树算法的数据分类预测&#xff08;Excel可直接替换数据&#xff09; 1.模型原理1.1 模型原理1.2 数学模型 2.模型参数3.文件结构4.Excel数据5.下载地址6.完整代码7.运行结果 1.模型原理 决策树是一种基于树状结构的分类和回归模型&#xff0c;它通过一系列…

MySql(干货)

写这篇博客的目的不是为了将介绍原理&#xff0c;而是为了Sql中的代码操作属实太多了&#xff0c;在这里进行一个汇总&#xff0c;方便查阅&#xff01;&#xff01;&#xff01; Sql分类 分类全称说明 DDL Data Definintion Language数据定义语言&#xff0c;用来定义数据库对…

微信小程序(由浅到深)

文章目录 一. 项目基本配置1. 项目组成2. 常见的配置文件解析3. app.json全局的五大配置4.单个页面中的page配置5. App函数6.tabBar配置 二. 基本语法&#xff0c;事件&#xff0c;单位1. 语法2. 事件3. 单位 三. 数据响应式修改四 . 内置组件1. button2. image3. input4. 组件…

k8s常用资源管理 控制

目录 Pod&#xff08;容器组&#xff09;&#xff1a;Pod是Kubernetes中最小的部署单元&#xff0c;可以包含一个或多个容器。Pod提供了一种逻辑上的封装&#xff0c;使得容器可以一起共享网络和存储资源 1、创建一个pod 2、pod管理 pod操作 目录 创建Pod会很慢 Pod&…