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.hqwc.cn/news/60444.html

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

相关文章

接口测试过程中常见的接口安全性问题,通用测试点整理归纳

我们日常的接口测试工作主要是验证接口的功能性(入参、出参、边界值等),在接口测试过程中遇到的一些接口安全性的问题,整理成了通用的测试点,不一定适用于全部的产品,仅做参考。 一、登录接口校验 验证登…

Android Framework底层原理之WMS的启动流程

一 概述 今天,我们介绍 WindowManagerService(后续简称 WMS)的启动流程,WMS 是 Android 系统中,负责窗口显示的的服务。在 Android 中它也起着承上启下的作用。 如下图,就是《深入理解 Android》书籍中的…

编织人工智能:机器学习发展历史与关键技术全解析

文章目录 1. 引言1.1 机器学习的定义1.2 重要性和应用场景重要性应用场景 2. 机器学习的早期历史2.1 初期理论与算法感知机决策树 2.2 早期突破支持向量机神经网络初探 3. 21世纪初期的发展3.1 集成学习方法随机森林XGBoost 3.2 深度学习的崛起卷积神经网络(CNN&…

validator入门

validator中文文档地址和英文地址 https://docs.jboss.org/hibernate/validator/4.2/reference/zh-CN/html/validator-gettingstarted.html https://docs.jboss.org/hibernate/validator/6.0/reference/en-US/html_single/#preface自定义hibernate-validator校验 工具类Valid…

电视盒子哪个好?文宇数码盘点口碑网络电视盒子排行榜

大家好,欢迎来到文宇数码频道。本期我们要分享的数码产品是电视盒子,电视盒子可以说是家家必备,很多用户在买电视盒子时踩过雷,因此本期我们的主题是电视盒子哪个好,为了结果更客观公正,我们购入了十多款热…

希尔排序——C语言andPython

前言 步骤 代码 C语言 Python 总结 前言 希尔排序(Shell Sort)是一种改进的插入排序算法,它通过将数组分成多个子序列进行排序,逐步减小子序列的长度,最终完成整个数组的排序。希尔排序的核心思想是通过排序较远距…

爬虫学习记录(持续更新)

一、问题记录 1.使用webdriver报错AttributeError: str object has no attribute capabilities 解决:目前使用的selenium版本是4.11.2,可以不必设置driver.exe的路径,selenium可以自己处理浏览器和驱动程序,因此,使用…

Delphi7通过VB6之COM对象调用PowerBASIC写的DLL功能

Delphi7通过VB6之COM对象调用PowerBASIC写的DLL功能。标题挺长,其实目标很简单,就是在Delphi7中使用PowerBASIC的MKI/CVI, MKS/CVS, MKD/CVD,并顺便加入CRC16检验函数,再进行16进制高低字节调整,方便在VB6、Delphi、La…

Linux配置QT Creator环境:ubuntu中安装QT Creator环境

一、前景 目前市面上很多公司使用QT Creator进行界面开发,基本都会选择在Linux环境进行,优点不仅是市场所需,更是方便后期代码的移植,相较于Windows系统,Linux系统移植性非常好。故此篇文章,介绍如何在Linu…

【EI/SCOPUS检索】第三届新媒体发展与现代化教育国际学术会议(NMDME 2023)

第三届新媒体发展与现代化教育国际学术会议(NMDME 2023) The 3rd International Conference on New Media Development and Modernized Education 第三届新媒体发展与现代化教育国际学术会议(NMDME 2023)将于2023年10月13-15日于西安召开。会议旨在为新…

FPGA_时钟显示(时钟可调)

1. 实验说明 在数码管显示数据的基础上,让六位数码管显示数字时钟,并且通过按键可以对时间进行修改。 实验目标:六位数码管分别显示时间的时分秒,且通过按键可实现加减调整时间及清零功能。 key1: 切换键:选择待…

lancet: 【推荐】--源码学习

一个全面、高效、可复用的go语言工具函数库; 可以学习源码的好的地方,这个是个工具库,建议最好的办法是 在项目中导入后,然后查看他的各个源代码进行学习使用 golangd中,查看导入包以及他的源代码; 中文…