关于跨域的what，why，how

最新推荐文章于 2025-09-12 18:45:12 发布
最新推荐文章于 2025-09-12 18:45:12 发布
阅读量82 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： 操作系统 前端 ViewUI
原文链接：https://segmentfault.com/a/1190000014509060
本文详细解释了跨域问题产生的原因及解决办法，包括浏览器限制、请求类型的影响，并介绍了JSONP和CORS两种主要解决方案。

1.跨域是什么鬼？

前台调用后台的接口，如果不是同一个域，就会产生跨域问题

2.为什么会产生跨域问题？

1. 浏览器限制

浏览器出于安全考虑，发现请求是跨域的时候，会做一些校验，校验不通过，就会有跨域问题

2. 发出的请求不是本域的

发出的请求，不是本域的，协议，域名，端口，任何一个不一样，浏览器都会认为是跨域

3. 发出的是XHR（XMLHttpRequest）请求

如果发出的不是XHR请求，即使不是本域的，浏览器不会认为是跨域

3.如何解决跨域问题？

1.让浏览器不做校验


命令行参数启动：通过命令行参数启动浏览器(--disable-web-security), 浏览器不会检查

MacOS命令行：
open -n /Applications/Google Chrome.app/ --args --disable-web-security —user-data-dir=/Users/你电脑的名字/MyChromeDevUserData/

2.jsonp本身


jsonp是用动态创建的script标签对进行请求  /get?callback=123
为什么jsonp可以解决跨域问题？
发出的请求不是xhr类型，type是script类型，浏览器不做校验

callback的内容，就是函数名，返回的数据，是作为函数的参数
jsonp的缺点：
-服务器需要改动代码
-只支持get方法
-发送的不是xhr请求

3.跨域本身

跨域资源共享CORS：在响应头增加指定的字段，允许对方调用

Access-Control-Allow-Origin
            "*" 允许所有域跨域调用
            "http://www.sanjieke.cn" 允许这个域跨域调用
        
Access-Control-Allow-Method
            "*" 允许所有的方法
            "GET" 指定允许的方法
            
带cookie的跨域，origin必须是全匹配，不能是*号，需要增加Access-Control-Allow-Credentials为true，前端也需要设置xhr.withCredentials = true 带上cookie


带自定义头的跨域，增加Access-Control-Allow-Headers，值为自定义头

更详细的解读 https://segmentfault.com/a/11...

智能数字身份管理系统：AI应用架构师的技术发展方向
AI天才研究院
08-04 1120
数字身份（Digital Identity）已从单纯的“账号密码”进化为包含生物特征、行为模式、设备指纹、社交关系等多维数据的“数字人格”。安全与体验的对立：强安全措施（如频繁MFA验证）导致用户体验下降，而简化流程则增加风险；静态规则与动态威胁的脱节：基于预定义规则的权限管理（如RBAC）无法应对AI驱动的自适应攻击；数据孤岛与隐私合规的冲突：跨平台身份数据分散，集中式管理面临GDPR、CCPA等隐私法规的严格限制。
数据交易赚不到钱？AI智能体的3个价值维度帮你破局
AI天才研究院
08-10 414
数据交易的核心矛盾在于数据的潜在价值与现实流动性之间的巨大鸿沟。一方面，数据作为一种新型生产要素，其在优化决策、驱动创新、创造商业价值方面的潜力毋庸置疑。另一方面，数据本身具有非竞争性、易复制性、价值模糊性、隐私敏感性等特性，使得数据的采集、清洗、确权、定价、交易、交付、安全保障等各个环节都充满了挑战。传统的数据交易模式，无论是简单的数据买卖，还是基于API接口的服务，往往停留在“原始数据”或“初级加工数据”的层面，难以充分释放数据的深层价值，也难以满足日益复杂和个性化的市场需求。
关于跨域问题
蔡兵的专栏
07-21 646
自己折腾了一段时间的js，总是卡在跨域问题。 比如，自己用Java写了个后端。某一天，需要测试angular js的post请求是否正确，便想到了这个服务端，当请求的时候提示“跨域”。 今天，需要得到iframe页面对应的url，也是因为跨域，导致失败。 刚刚看到了一篇文章，说跨域问题是为了用户安全，讲的很有道理，看来以为遇到这类问题，只能想别的办法了。 原文链接：http://sta
关于跨域以及跨域的实现方式
weixin_34349320的博客
08-18 189
关于跨域 why? 为什么会有跨域？ 我们得先了解下 ==同源策略（SOP, Same Origin Policy)==。 浏览器出于安全方面的考虑，只能访问与包含它的页面位于同一个域中的资源，该策略为通信设置了“相同的协议、相同的域、相同的端口”这一限制。试图访问上述限制之外的资源，都会引发安全错误。这种安全策略可以预防某些恶意行为。 ...
通俗讲跨域
前端小师姐迪迪_的博客
06-24 290
浏览器跨域如何解决
10 种跨域解决方案（附终极方案）
程序员秋风的博客
04-14 6368
写在前面 嗯。又来了，又说到跨域了，这是一个老生常谈的话题，以前我觉得这种基础文章没有什么好写的，会想着你去了解底层啊，不是很简单吗。但是最近在开发一个 vscode 插件 发现，当你刚入门一样东西的时候，你不会想这么多，因为你对他不熟悉，当你遇到不会的东西，你就是想先找到解决方案，然后通过这个解决方案再去深入理解。就比如跨域，新人或者刚接触的人对它并不是那么熟悉，所以说列出一些自己积累的方案，以...
跨域问题
weixin_33716154的博客
01-30 124
跨域是个老生常谈的跨题。今天在我们后端的帮助和配合下，对跨域又多了一层认识。感觉对于每件事，只要是从3个方面（what,why,how）去理解，都会对其有个基本（70%）认识。 好记性不如烂笔头，针对跨域，我总结了以下3个问题。1、为什么产生跨域问题？2、如何解决以及原理？ 3、每种方式各有什么优缺点。 一、是什么？ 跨域是由于同源策略（同域名，同端口...
使用nginx反向代理发起跨域请求
天心天地生的博客
08-22 7731
任务5：http://www.jnshu.com/task/2/45/detail//#1 页面文件放在github：https://github.com/Resalee/css_task/tree/master/JS5 任务用时：5月22日-5月26日，用时约36小时。 任务说明 买的服务器到期了，不准备续，在本地做的测试。所以https://resalee.github.io/css_...
浏览器跨域问题
weixin_34174132的博客
05-20 88
1.同样是访问同一台服务器上的 同一个 php页面，（http://112.74.100.71:81/test.php） <?php header('Access-Control-Allow-Origin: *'); header('Content-type: application/json'); $rsp = array(); $rsp['data'] = 'hello...
How are Websockets implemented?
suiusoar
10-20 711
WebSocket 是如何实现的？
跨域读取cookie的问题
ahz50086的博客
05-19 116
P3P, Cookies and IE6.0: A Case Study The Compact Policy Headers are pieces of information sent to the browser before the main page is evaluated. When a cookie is sent, it must be accompanied by...
深入浅出FE（十四）深入浅出websocket
前端产品工程师
11-29 1005
引言 Websocket是一个持久化的协议 协议分为ws（80端口）协议 和wss（443端口）协议。 WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455，并由RFC7936补充规范。WebSocket API也被W3C定为标准。 WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久
Text-to-SQL小白入门（一）综述学习
junewgl
08-01 3601
本文主要介绍了Text-to-SQL研究的定义、意义、研究方法以及未来展望，主要是对Text-to-SQL领域进行一个初步的认识和了解，适合初学者入门了解。
# -*- coding: utf-8 -*- """ ============================ requests 课件：HTTP 请求核心方法详解 ============================ 版本：3.1 | 修复 JSON 解码错误 + 最佳实践示例 📌 使用的免费测试接口： 1. https://jsonplaceholder.typicode.com/ - 提供标准 REST API 接口 2. https://postman-echo.com/post - 稳定的 POST 测试接口，支持表单提交 """ # 🧠 What：requests 是什么？ # requests 是 Python 中最常用的 HTTP 客户端库，用于向 Web 服务器发送各种类型的请求。 # 它广泛应用于 API 调试、接口测试、网络爬虫等场景。 # 🛠 How：怎么使用？ # - 使用 requests.get() 发送 GET 请求 # - 使用 requests.post() 发送 POST 请求 # - 使用 requests.put() 发送 PUT 请求 # - 使用 requests.delete() 发送 DELETE 请求 # - 使用 params、data、json 控制请求体 # - 使用 headers 设置请求头 # - 使用 timeout 控制超时时间 # - 使用异常处理保障程序健壮性 # 🎯 Why：为什么要用 requests？ # - 简洁易用，语法直观 # - 支持多种 HTTP 方法 # - 自动处理编码和解码 # - 社区活跃，文档丰富 # - 适用于自动化脚本、接口测试、爬虫等 import requests # ==================== # 第一部分：GET 请求详解 # ==================== # 示例 1：最基础的 GET 请求 def demo_get_simple(): """最基础的 GET 请求示例""" print("=== 示例 1：最基础的 GET 请求 ===") url = "https://jsonplaceholder.typicode.com/posts/1" response = requests.get(url) print(f"状态码: {response.status_code}") print("响应内容（前50字符）:") print(response.text[:50] + "...") # 示例 2：带查询参数的 GET 请求 def demo_get_with_params(): """带查询参数的 GET 请求示例""" print("=== 示例 2：带查询参数的 GET 请求 ===") url = "https://jsonplaceholder.typicode.com/posts" params = { "userId": 1, "_limit": 2 } response = requests.get(url, params=params) print(f"完整URL: {response.url}") print("返回数据:") for item in response.json(): print(f"ID: {item['id']}, 标题: {item['title']}") # 示例 3：带请求头的 GET 请求 def demo_get_with_headers(): """带请求头的 GET 请求示例""" print("=== 示例 3：带请求头的 GET 请求 ===") url = "https://jsonplaceholder.typicode.com/posts" headers = { "User-Agent": "MyApp/1.0", "Accept": "application/json" } response = requests.get(url, headers=headers) print(f"响应头 Content-Type: {response.headers['Content-Type']}") print("第一条数据标题:", response.json()[0]['title']) # 示例 4：带超时和异常处理的 GET 请求 def demo_get_with_timeout(): """带超时和异常处理的 GET 请求示例""" print("=== 示例 4：带超时和异常处理的 GET 请求 ===") url = "https://jsonplaceholder.typicode.com/posts" try: response = requests.get(url, timeout=3) response.raise_for_status() print("请求成功，返回数据条数:", len(response.json())) except requests.exceptions.Timeout: print("请求超时！") except requests.exceptions.HTTPError as e: print(f"HTTP 错误: {e}") except requests.exceptions.RequestException as e: print(f"请求错误: {e}") # ==================== # 第二部分：POST 请求详解 # ==================== # 示例 5：最基础的 POST 请求（JSON 数据） def demo_post_simple_json(): """最基础的 POST 请求（JSON 数据）""" print("=== 示例 5：最基础的 POST 请求（JSON 数据） ===") url = "https://jsonplaceholder.typicode.com/posts" data = { "title": "新文章", "body": "这是内容", "userId": 1 } response = requests.post(url, json=data) print(f"状态码: {response.status_code}") print("返回数据 ID:", response.json()['id']) # 示例 6：POST 发送表单数据（使用支持 form 数据返回的接口） def demo_post_form_data(): """POST 发送表单数据（100% 可靠）""" print("\n=== 示例 5：表单数据 POST 请求 ===") url = "https://httpbin.org/post" form_data = { "username": "demo_user", "email": "user@example.com", "subscribe": "true", "preferences": "tech,news" } try: print(f"📤 发送的表单数据: {form_data}") response = requests.post(url, data=form_data, timeout=5) response.raise_for_status() result = response.json() print("\n✅ 服务器接收到的表单数据:") print(json.dumps(result['form'], indent=2)) print("\n🔍 请求详情:") print(f"来源IP: {result['origin']}") print(f"请求头: {json.dumps(result['headers'], indent=2)[:100]}...") except requests.exceptions.RequestException as e: print(f"❌ 请求失败: {e}") except json.JSONDecodeError: print("❌ 响应不是有效JSON") print(f"原始响应: {response.text[:200]}") # 示例 7：POST 发送 JSON + 自定义 Headers def demo_post_json_with_headers(): """POST 发送 JSON + 自定义 Headers 示例""" print("=== 示例 7：POST 发送 JSON + 自定义 Headers ===") url = "https://jsonplaceholder.typicode.com/posts" data = { "title": "高级文章", "body": "带自定义头", "userId": 1 } headers = { "Content-Type": "application/json", "X-Requested-With": "XMLHttpRequest" } response = requests.post(url, json=data, headers=headers) print("返回标题:", response.json()['title']) # 示例 8：POST 发送 JSON + 超时和异常处理 def demo_post_with_timeout(): """POST 发送 JSON + 超时和异常处理示例""" print("=== 示例 8：POST 发送 JSON + 超时和异常处理 ===") url = "https://jsonplaceholder.typicode.com/posts" data = { "title": "测试超时", "body": "超时测试内容", "userId": 1 } try: response = requests.post(url, json=data, timeout=3) response.raise_for_status() print("创建成功，ID:", response.json()['id']) except requests.exceptions.Timeout: print("请求超时！") except requests.exceptions.RequestException as e: print(f"请求失败: {e}") # ==================== # 第三部分：PUT 请求详解 # ==================== # 示例 9：使用 PUT 更新资源 def demo_put_update(): """使用 PUT 请求更新资源示例""" print("=== 示例 9：使用 PUT 请求更新资源 ===") url = "https://jsonplaceholder.typicode.com/posts/1" data = { "id": 1, "title": "更新后的标题", "body": "更新后的内容", "userId": 1 } response = requests.put(url, json=data) print(f"状态码: {response.status_code}") print("更新后的标题:", response.json()['title']) # ==================== # 第四部分：DELETE 请求详解 # ==================== # 示例 10：使用 DELETE 删除资源 def demo_delete_resource(): """使用 DELETE 请求删除资源示例""" print("=== 示例 10：使用 DELETE 请求删除资源 ===") url = "https://jsonplaceholder.typicode.com/posts/1" response = requests.delete(url) print(f"状态码: {response.status_code}") print("响应内容:", response.text) # ==================== # 第五部分：综合实战（最佳实践示例） # ==================== # 示例 11：最佳实践 - 完整请求流程（headers + timeout + session + 异常处理） def demo_best_practice(): """最佳实践示例：完整请求流程 + 安全调用""" print("=== 示例 11：最佳实践 - 完整请求流程 ===") url = "https://jsonplaceholder.typicode.com/posts" headers = { "User-Agent": "BestPracticeApp/1.0", "Accept": "application/json" } data = { "title": "最佳实践文章", "body": "这是一篇测试文章", "userId": 1 } with requests.Session() as session: session.headers.update(headers) try: response = session.post(url, json=data, timeout=5) response.raise_for_status() print("文章创建成功，ID:", response.json()['id']) except requests.exceptions.Timeout: print("请求超时，请检查网络") except requests.exceptions.HTTPError as e: print(f"HTTP 错误: {e}") except requests.exceptions.RequestException as e: print(f"请求异常: {e}") # ==================== # 主函数：运行所有示例 # ==================== if __name__ == "__main__": print("🚀 开始演示 requests 核心请求方法详解") demo_get_simple() demo_get_with_params() demo_get_with_headers() demo_get_with_timeout() demo_post_simple_json() demo_post_form_data() demo_post_json_with_headers() demo_post_with_timeout() demo_put_update() demo_delete_resource() demo_best_practice() # 最佳实践 print("\n✅ 所有演示完成") 这个文件用的都是别人的接口，不稳定，你帮我在本地写一个接口，支持以上所有的请求方式，并且能返回我们输入的内容
09-05
好的，用户之前多次反馈关于使用外部API的问题，特别是接口不稳定导致示例无法正常运行。现在用户希望改用本地接口，支持所有请求方法并返回输入内容。我需要提供一个本地运行的解决方案。 首先，用户需要本地...
性能测试工具JvisualVM/jconsole使用
平时的经验总结，学习历程
09-12 247
port是jmx的另一个通信端口。可以不设置，启动后系统会自动随机指定端口。如果关闭了防火墙，没有网络访问策略，可以不设置。如果服务器需要开通端口访问策略此处需要配置开通策略的端口。然后在windows客户机，安装jdk目录下的bin目录下找到jvisualvm.exe或jconsole，通过远程连接方式监控jvm的cpu 内存 线程 类加载的情况。com.sun.management.jmxremote.port 是客户端连接的端口。主要介绍远程使用方式，在启动参数添加如下参数。
Linux权限
Wangshijie1015的博客
09-10 742
所以就出现了所属者这个角色，有了所属者之后，如果李四说他想看这个文件，那你就将李四添加为该文件的所属者，并赋予所属者所需的权限，这样除了拥有者和所属者有所需权限，经由李四分享给其他人后，他们都是other，没有所需权限就无法对文件进行所需操作了。原因就是在Centos下，文件在确定用户角色的时候，确认的顺序是按拥有者，所属者，other这个顺序进行确认的，这里确定了wsj是拥有者的角色，那其权限就是---，一旦角色确认下来后，权限也就确定下来了，不会因为权限被拒绝后再去确认用户是不是其他角色。
打印机已联网，但打印机显示“未连接”，解决方案
qq_40230540的博客
09-08 526
在弹出来的窗口中，选择 “Standard TCP/IP Port”，然后点击 “新端口” (New Port…在 “打印机名或IP地址” 栏中，输入您刚才从打印机配置页上找到的IP地址（例如192.168.1.105）。找到您的打印机图标，右键点击它，选择 “打印机属性” (注意不是单纯的“属性”)。打印机已联网，电脑未正确指向打印机的IP地址，也会显示“未连接”，查看方式改为“大图标”或“小图标”，找到并点击 “设备和打印机”。如果无法重启，可以先选择 “停止”，等待几秒后，再选择 “启动”。
设计模式(C++)详解—抽象工厂模式 (Abstract Factory)(2)
最新发布
weixin_42108533的博客
09-12 615
抽象工厂模式详解 抽象工厂模式是一种创建型设计模式，用于创建一系列相关或依赖对象的家族。它解决了在不指定具体类的情况下创建相互关联的产品对象的问题。 核心特点： 提供"工厂的工厂"概念，能创建整套相互关联的产品 确保创建的产品能协同工作（如苹果生态设备） 客户端代码只依赖抽象接口，与具体实现解耦 适用场景： 跨平台UI组件开发 数据库访问层 游戏开发中的不同风格角色/道具 主题系统切换 优势： 产品兼容性保证 易于切换整套产品族 符合开闭原则（新增产品族无需修改代码） 扩展性特点： 纵向
Linux笔记---进程间关系与守护进程
2302_80372340的博客
09-09 1249
在操作系统中，是由，用于简化对多个关联进程的统一管理。它是 Unix/Linux 系统中进程组织的重要概念，主要为了方便信号传递、作业控制等操作。每个进程组由唯一的 进程组 ID（PGID） 标识。通常，进程组的创建者（称为 “组长进程”）的进程 ID（PID）会作为该进程组的 PGID（即 PGID = 组长进程的PID）。什么是有关联的进程呢？有父子关系的进程、通过管道相连的进程……这些在操作系统层面上有关联，需要相互协作的进程就叫有关联的进程。
利用window.name突破iframe跨域限制
在互联网技术中，跨域问题一直是Web开发中的一大难题。跨域问题主要出现在Web页面的脚本试图访问另一个域下的资源时，出于安全考虑，浏览器会限制这种跨域访问。然而，在某些情况下，我们又需要实现不同域之间的数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值