当前位置: 首页 > news >正文

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.lryc.cn/news/121630.html

相关文章:

  • Java设计模式-抽象工厂(Abstract Factory)模式
  • Hive加密,PostgreSQL解密还原
  • 2023年测试岗,接口测试面试题汇总+答案,拿捏面试官...
  • C# --- Case Study
  • 3.1 Spring MVC概述
  • Towards Open World Object Detection【论文解析】
  • IP协议
  • 使用sqlplus连接oracle,提示ORA-01034和ORA-27101
  • TLS协议
  • Academic Inquiry|国外文献查找
  • opencv图片灰度二值化
  • 短肥网络的 RTT 敏感性
  • Nonebot实战之编写插件1
  • Linux-C++开发项目:基于主从Reactor模式的高性能并发服务器
  • 【Linux的开胃小菜】Linux系统安装后初始化配置操作
  • Java批量下载书籍图片并保存为PDF的方法
  • flutter 创建lib
  • 深度剖析堆栈指针
  • C++笔记之静态成员函数的使用场景
  • Nginx的优化和防盗链
  • 第二十次CCF计算机软件能力认证
  • 一篇文章带你了解Java发送邮件:使用JavaMail API发送电子邮件的注意事项、发送附件等
  • kubernetes的日志
  • 设计HTML5文本
  • msvcr120.dll丢失怎样修复?总结三个dll修复方法
  • 选择题方法论——颉斌斌
  • 23.8.8 杭电暑期多校7部分题解
  • 《24海南大学835软件工程考研经验贴》
  • 【yolo系列:运行报错AttributeError: module ‘torch.nn‘ has no attribute ‘Mish‘】
  • Leetcode 剑指 Offer II 039. 直方图最大矩形面积