昨天在本地调试前端项目时，调用后端接口突然报了跨域错误，浏览器控制台清一色的 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.mzph.cn/news/918798.shtml
如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！相关文章
从0开始使用LabVIEW处理数据采集卡-概述和新建新建工程
pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …
用 Excel 快速处理接口返回的 JSON 数据
作为前端开发者，有时候需要把接口返回的 JSON 数据整理成表格，方便和产品、测试核对数据。之前我都是手动复制粘贴，一条数据要改半天，后来发现用 Excel 就能快速处理，分享下具体步骤。
首先，把接口返回的 JSON…
网站建设的几个阶段商城网站不易优化
cf1552F. Telepanting
题意：
在一个坐标轴上，有n个传送门，格式为：xi,yi,si,可以从xi传送到yi，si表示状态，如果si为0，到位置xi时不会传送，si变为1.如果到达xi时si为1，则…
做设计有哪些好用的素材网站数字化展厅设计方案
文章目录 1. 二叉搜索树的概念2. 二叉搜索树的操作1.1 二叉搜索树的查找1.2 二叉搜索树的插入1.3 二叉搜索树的删除 1. 二叉搜索树的概念
二叉搜索树又称二叉排序树，它可能是一棵空树，也可能是具有以下性质的二叉树：
若它的左子树不为空&am…
Overleaf项目文件同步工具: olsync
Hi! 我编写了一个用于Overleaf项目备份的命令行工具olsync, 希望可以帮助你更好的管理你的latex项目以及私有化的Overleaf服务实例.如果喜欢, 请点一个Star, 谢谢olsync 是一个简单的命令行工具，用于将你的 Overleaf …
CF1995D Cases
CF1995D Cases
题意：
给定一个长为 \(n\)，字符集大小 \(c=18\) 的字符串，给定一个整数 \(m\) ，你需要求出一个字符集合 \(S\) 满足在原串中每 \(m\) 个字符中至少有一个被包含在集合 \(S\) 中。
其中 \(m\le n\le …
日志| 编辑距离 | 最长有效括号 |
力扣解题思路
动态规划核心思想 ：初始化 + 填充
第一次提交
1状态转移:
左上到cur 是 替换(相同则继承左上)
上到cur 是 删除
左到cur 是 添加
2初始化：
第一行=空字符变成目标字符串的次数
第一列=原字符串变成空字…
网站建设毕业设计过程杭州电商网站开发
概述 - QML 和 C++ 集成 QML 旨在通过 C++ 代码轻松扩展。 Qt QML 模块中的类允许从 C++ 加载和操作 QML 对象，并且 QML 引擎与 Qt 元对象系统集成的特性使 C++ 功能可以直接从 QML 调用。 这允许开发使用 QML、JavaScript 和 C++ 代码混合实现的混合应用程序。 集成 QML 和 C…
UniApp ConnectSocket连接websocket - 详解
UniApp ConnectSocket连接websocket - 详解pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "…
《etcd库——键值存储系统》 - 教程
《etcd库——键值存储系统》 - 教程pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco…
有一个函数只会返回0和1，且返回0和返回1的概率不等。要求只能通过这个函数生成一个等概率返回0和1的函数
有一个函数只会返回0和1，且返回0和返回1的概率不等。要求只能通过这个函数生成一个等概率返回0和1的函数题目分析这个函数只会生成0和1，虽然不等概率，但是如果我们roll两次，只记录结果是(0,1)和(1,0)的这两种情况。…
AI智能体开发实战：17种核心架构模式详解与Python代码实现
在构建一个大规模 AI 系统时，我们其实就是在把不同的“智能体设计模式（agentic design patterns）”组合起来。不管系统多复杂都可以拆解成有限的几种"设计模式"。这些模式各有各的用法——有的专门负责思…
代码随想录算法训练营第十天 | 232. 用栈实现队列、225. 用队列实现栈、20. 有效的括号、删除字符串中的所有相邻重复项
都很简单不赘述type MyQueue struct {StackinTop intStackOutTop intStackIn []intStackOut []int
}func Constructor() MyQueue {StackIn := make([]int,0)StackOut := make([]int,0)return MyQueue{StackinTop: 0,St…
文书写作网站百度收录查询api
精讲部分，主要是对Transformer的深度理解方便日后从底层逻辑进行创新，对于仅应用需求的小伙伴可以跳过这一部分，不影响正常学习。 1. 残差模块 何凯明在2015年提出的残差网络（ResNet），Transformer在2016年…
深度学习周报（9.15~9.21） - 实践
pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …
关于“悬荡悟空”决策机制的简要技术说明
关于“悬荡悟空”决策机制的简要技术说明
“悬荡悟空”是一种尚处于构想阶段的智能决策机制，其核心在于尝试使系统具备在复杂情境中进行多路径因果并行推演与价值权衡的能力。
该机制在极端场景（如自动驾驶面临的突发…