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

本地调试接口时遇到的跨域问题,十分钟解决

昨天在本地调试前端项目时,调用后端接口突然报了跨域错误,浏览器控制台清一色的 Access-Control-Allow-Origin 提示,一开始以为是后端配置的问题,折腾半天发现其实前端自己就能解决,分享下我的排查和解决过程。​
首先先确认问题原因:本地前端项目跑在 localhost:8080,后端接口地址是 http://192.168.1.100:8081,因为端口号不同,浏览器的同源策略就会拦截请求,这就是跨域的本质。​
一开始我去问后端同事是不是没配置跨域头,同事查了说配置了,还发了 Postman 调用成功的截图。这时候我才意识到,可能是本地环境的问题,不用麻烦后端。​
然后想到了 VS Code 的 Live Server 插件,其实它自带跨域支持。右键项目文件夹,选择 “Open with Live Server”,它会启动一个本地服务,默认端口是 5500,这时候再调用接口,跨域错误居然消失了!后来查了下原理,Live Server 会在响应头里自动添加 Access-Control-Allow-Origin: *,正好解决了跨域问题。​
如果不用 Live Server,也可以用 Node.js 搭个简单的代理服务器,不过对前端来说,Live Server 确实是最省事的方案。遇到跨域别先慌着找后端,先试试本地解决,可能十分钟就能搞定~

http://www.hskmm.com/?act=detail&tid=18322

相关文章:

  • 用 Excel 快速处理接口返回的 JSON 数据
  • 调度的基本概念
  • Overleaf项目文件同步工具: olsync
  • CF1995D Cases
  • 日志| 编辑距离 | 最长有效括号 |
  • day5
  • 《etcd库——键值存储系统》 - 教程
  • 有一个函数只会返回0和1,且返回0和返回1的概率不等。要求只能通过这个函数生成一个等概率返回0和1的函数
  • AI智能体开发实战:17种核心架构模式详解与Python代码实现
  • 代码随想录算法训练营第十天 | 232. 用栈实现队列、225. 用队列实现栈、20. 有效的括号、删除字符串中的所有相邻重复项
  • 2025.9.26总结 - A
  • MySQL性能优化
  • 关于“悬荡悟空”决策机制的简要技术说明
  • 最小二乘问题详解1:线性最小二乘
  • 9月26日
  • 工程监理行业多模态视觉​​​​​​​大模型系统,打造工地行业全场景的监理智能生态
  • 完整教程:【鸿蒙心迹】摸蓝图,打地基
  • 正则表达式
  • LuatOS Air780EPM 实现 HTTP 通信:从原理到代码实践
  • 搜维尔科技:Senseglove Nova 2触觉手套:虚拟训练、VR/AR模拟和研究中的触觉反馈
  • 深入解析:盟接之桥EDI软件:中国制造全球化进程中的连接挑战与路径探索
  • 【STM32H7】基于CubeMX从零开始搭建的HAL库工程模板(包含串口重定向和DSP库)
  • 在Windows架构中安装Miniforge及python环境变量配置
  • 搜维尔科技:Force Dimension Omega力反馈设备遥操作工业机器人
  • 3. Ollama 安装,流式输出,多模态,思考模型 - Rainbow
  • C++程序练习(部分未完全完成)
  • C#性能优化基础:垃圾回收机制
  • 实验报告1
  • 2025.9.26——1蓝
  • 根号