如何解决前端跨域问题：从CORS到JSONP

news2024/9/20 1:02:28

聚沙成塔·每天进步一点点


本文回顾

  • ⭐ 专栏简介
  • 如何解决前端跨域问题：从CORS到JSONP
    • 1. 引言
    • 2. 什么是跨域问题？
      • 2.1 同源策略（Same-Origin Policy）
      • 2.2 跨域请求的场景
    • 3. 解决跨域问题的常见方法
      • 3.1 使用CORS（Cross-Origin Resource Sharing）
        • 3.1.1 什么是CORS？
        • 3.1.2 如何配置CORS？
        • 3.1.3 浏览器端如何处理CORS？
        • 3.1.4 CORS的优点和限制
      • 3.2 使用JSONP（JSON with Padding）
        • 3.2.1 什么是JSONP？
        • 3.2.2 如何实现JSONP？
        • 3.2.3 JSONP的优点和限制
      • 3.3 代理服务器（Proxy Server）
        • 3.3.1 什么是代理服务器？
        • 3.3.2 如何实现代理服务器？
        • 3.3.3 代理服务器的优点和限制
      • 3.4 使用跨域资源代理（Cross-Origin Resource Proxy）
    • 4. 常见跨域问题的解决方案比较
    • 5. 总结
  • ⭐ 写在最后

⭐ 专栏简介

前端入门之旅：探索Web开发的奇妙世界 欢迎来到前端入门之旅！感兴趣的可以订阅本专栏哦！这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者，这里都将为你提供一个系统而又亲切的学习平台。在这个专栏中，我们将以问答形式每天更新，为大家呈现精选的前端知识点和常见问题解答。通过问答形式，我们希望能够更直接地回应读者们对于前端技术方面的疑问，并且帮助大家逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是各种常用框架和工具，我们将深入浅出地解释概念，并提供实际案例和练习来巩固所学内容。同时，我们也会分享一些实用技巧和最佳实践，帮助你更好地理解并运用前端开发中的各种技术。

在这里插入图片描述

无论你是寻找职业转型、提升技能还是满足个人兴趣，我们都将全力以赴，为你提供最优质的学习资源和支持。让我们一起探索Web开发的奇妙世界吧！加入前端入门之旅，成为一名出色的前端开发者！ 让我们启航前端之旅！！！

今日份内容：如何解决前端跨域问题：从CORS到JSONP

在这里插入图片描述

如何解决前端跨域问题：从CORS到JSONP

1. 引言

在前端开发中，跨域问题是开发者经常会遇到的挑战之一。浏览器出于安全性考虑，默认情况下会限制从一个域（如 example.com）向另一个域（如 api.example.com）发起的HTTP请求。这种限制被称为同源策略（Same-Origin Policy）。为了解决跨域问题，开发者可以使用多种技术手段，其中最常见的是CORS（跨域资源共享）和JSONP（JSON with Padding）。本文将详细探讨跨域问题的原理，并介绍几种常见的解决方案。

2. 什么是跨域问题？

2.1 同源策略（Same-Origin Policy）

同源策略是浏览器的一种安全机制，用于防止不同来源之间的恶意交互。它要求在访问某个资源时，资源的域、协议和端口必须与发起请求的网页完全一致。如果不一致，浏览器将阻止访问。

例如，假设一个网页托管在 https://example.com，该网页尝试通过JavaScript访问 https://api.example.com/data。由于这两个URL的域名不同，浏览器将拒绝此请求，这就是所谓的跨域问题。

2.2 跨域请求的场景

跨域请求通常发生在以下几种场景下：

  • 不同的域名：如 https://example.com 与 https://api.example.com。
  • 不同的端口：如 https://example.com:3000 与 https://example.com:4000。
  • 不同的协议：如 http://example.com 与 https://example.com。

3. 解决跨域问题的常见方法

3.1 使用CORS（Cross-Origin Resource Sharing）

3.1.1 什么是CORS？

CORS是一种允许服务器明确告诉浏览器允许哪些来源可以访问资源的机制。通过在服务器端设置适当的HTTP头，服务器可以控制哪些域、HTTP方法和HTTP头可以用于跨域请求。

3.1.2 如何配置CORS？

CORS的配置主要在服务器端进行，以下是常见的HTTP头配置：

  • Access-Control-Allow-Origin：指定允许哪些域发起跨域请求。可以设置为具体的域名（如 https://example.com），或者设置为 * 以允许所有域访问。

  • Access-Control-Allow-Methods：指定允许的HTTP方法，如 GET、POST、PUT、DELETE 等。

  • Access-Control-Allow-Headers：指定允许的HTTP头，如 Content-Type、Authorization 等。

  • Access-Control-Allow-Credentials：指定是否允许发送凭据（如Cookies）。默认为 false，可以设置为 true 以允许发送凭据，但这时 Access-Control-Allow-Origin 不能为 *。

示例：

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Credentials: true
3.1.3 浏览器端如何处理CORS？

当浏览器检测到跨域请求时，如果该请求符合简单请求的条件（如GET请求且不带自定义HTTP头），浏览器会自动发送请求并根据服务器返回的CORS头进行处理。如果请求不符合简单请求的条件（如带有复杂的HTTP头），浏览器会先发起一个预检请求（OPTIONS），服务器需要在预检请求中返回允许的CORS头，浏览器才会继续发送实际请求。

3.1.4 CORS的优点和限制

  • 优点：CORS是当前最广泛使用的跨域解决方案，能够灵活控制哪些资源可以被哪些来源访问。它直接在浏览器和服务器之间协作，不需要特殊的前端代码。

  • 限制：CORS需要服务器支持，因此在无法控制服务器的情况下（如使用第三方API），CORS可能不适用。此外，不正确的CORS配置可能导致安全问题，允许不安全的来源访问敏感数据。

3.2 使用JSONP（JSON with Padding）

3.2.1 什么是JSONP？

JSONP是一种利用<script>标签的跨域能力来实现跨域请求的技术。因为<script>标签不受同源策略的限制，它可以从任何域名加载资源。JSONP通过将请求数据包裹在一个函数调用中，使得浏览器可以执行从其他域名获取的JavaScript代码。

3.2.2 如何实现JSONP？

要实现JSONP，客户端需要在请求中指定一个回调函数的名称，服务器端则返回一个包含数据的JavaScript函数调用。

客户端示例：

<script>
  function handleResponse(data) {
    console.log('Received data:', data);
  }

  // 动态创建一个<script>标签来发起请求
  var script = document.createElement('script');
  script.src = 'https://api.example.com/data?callback=handleResponse';
  document.body.appendChild(script);
</script>

服务器端响应示例：

handleResponse({
  "name": "John",
  "age": 30
});
3.2.3 JSONP的优点和限制

  • 优点：JSONP可以在不支持CORS的情况下进行跨域请求，适用于老旧的API或不支持CORS的第三方服务。实现简单，不需要修改服务器的配置。

  • 限制：JSONP仅支持GET请求，不支持POST、PUT、DELETE等其他HTTP方法。此外，JSONP存在一定的安全隐患，因为它允许执行任意的JavaScript代码，可能导致XSS攻击。

3.3 代理服务器（Proxy Server）

3.3.1 什么是代理服务器？

代理服务器是一个中间服务器，前端可以通过它来请求外部资源。代理服务器位于前端和目标服务器之间，前端发出的请求首先被代理服务器接收，然后代理服务器将请求转发给目标服务器，目标服务器的响应再通过代理服务器返回给前端。

3.3.2 如何实现代理服务器？

常见的实现方式包括在开发环境中配置本地代理（如使用Webpack的 devServer 配置），或在生产环境中使用服务器端代理（如通过Nginx或Node.js）。

Webpack配置代理示例：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        pathRewrite: {'^/api' : ''}
      }
    }
  }
};
3.3.3 代理服务器的优点和限制

  • 优点：代理服务器可以完全控制请求的转发和响应，适用于复杂的跨域场景。通过代理，前端可以避免直接处理跨域问题。

  • 限制：需要额外的服务器配置和维护，增加了系统的复杂性。此外，代理服务器的性能可能成为瓶颈，尤其是在高并发场景下。

3.4 使用跨域资源代理（Cross-Origin Resource Proxy）

跨域资源代理是一种特殊类型的代理，它专门用于跨域请求。与普通的代理服务器不同，跨域资源代理通常是第三方服务，开发者可以直接调用这些服务来解决跨域问题。

4. 常见跨域问题的解决方案比较

解决方案优点缺点使用场景
CORS现代浏览器广泛支持，灵活控制访问权限需要服务器支持，配置复杂适用于所有现代Web应用
JSONP实现简单，适用于旧API仅支持GET请求，存在安全隐患适用于不支持CORS的旧API
代理服务器完全控制请求转发，适用范围广增加服务器负担，配置复杂适用于开发环境或复杂跨域需求
跨域资源代理简单易用，适合快速解决跨域问题依赖第三方服务，可能不可靠适用于需要快速解决跨域问题的小项目

5. 总结

跨域问题是前端开发中常见且重要的问题，解决跨域问题的技术手段多种多样。CORS作为现代Web的标准解决方案，广泛应用于各种场景，而JSONP则更适用于旧系统和不支持CORS的API。代理服务器为开发者提供了灵活性，但也增加了系统的复杂性。开发者应根据具体的项目需求和场景，选择最合适的跨域解决方案，以确保Web应用的安全性、性能和用户体验。

⭐ 写在最后

本专栏适用读者比较广泛，适用于前端初学者；或者没有学过前端对前端有兴趣的伙伴，亦或者是后端同学想在面试过程中能够更好的展示自己拓展一些前端小知识点，所以如果你具备了前端的基础跟着本专栏学习，也是可以很大程度帮助你查漏补缺，由于博主本人是自己再做内容输出，如果文中出现有瑕疵的地方各位可以通过主页的左侧联系我，我们一起进步，与此同时也推荐大家几份专栏，有兴趣的伙伴可以订阅一下：除了下方的专栏外大家也可以到我的主页能看到其他的专栏；

前端小游戏（免费）这份专栏将带你进入一个充满创意和乐趣的世界，通过利用HTML、CSS和JavaScript的基础知识，我们将一起搭建各种有趣的页面小游戏。无论你是初学者还是有一些前端开发经验，这个专栏都适合你。我们会从最基础的知识开始，循序渐进地引导你掌握构建页面游戏所需的技能。通过实际案例和练习，你将学会如何运用HTML来构建页面结构，使用CSS来美化游戏界面，并利用JavaScript为游戏添加交互和动态效果。在这个专栏中，我们将涵盖各种类型的小游戏，包括迷宫游戏、打砖块、贪吃蛇、扫雷、计算器、飞机大战、井字游戏、拼图、迷宫等等。每个项目都会以简洁明了的步骤指导你完成搭建过程，并提供详细解释和代码示例。同时，我们也会分享一些优化技巧和最佳实践，帮助你提升页面性能和用户体验。无论你是想寻找一个有趣的项目来锻炼自己的前端技能，还是对页面游戏开发感兴趣，前端小游戏专栏都会成为你的最佳选择。点击订阅前端小游戏专栏

在这里插入图片描述

Vue3通透教程【从零到一】（付费） 欢迎来到Vue3通透教程！这个专栏旨在为大家提供全面的Vue3相关技术知识。如果你有一些Vue2经验,这个专栏都能帮助你掌握Vue3的核心概念和使用方法。我们将从零开始,循序渐进地引导你构建一个完整的Vue应用程序。通过实际案例和练习,你将学会如何使用Vue3的模板语法、组件化开发、状态管理、路由等功能。我们还会介绍一些高级特性,如Composition API和Teleport等,帮助你更好地理解和应用Vue3的新特性。在这个专栏中,我们将以简洁明了的步骤指导你完成每个项目,并提供详细解释和示例代码。同时,我们也会分享一些Vue3开发中常见的问题和解决方案,帮助你克服困难并提升开发效率。无论你是想深入学习Vue3或者需要一个全面的指南来构建前端项目,Vue3通透教程专栏都会成为你不可或缺的资源。点击订阅Vue3通透教程【从零到一】专栏

在这里插入图片描述

TypeScript入门指南（免费） 是一个旨在帮助大家快速入门并掌握TypeScript相关技术的专栏。通过简洁明了的语言和丰富的示例代码，我们将深入讲解TypeScript的基本概念、语法和特性。无论您是初学者还是有一定经验的开发者，都能在这里找到适合自己的学习路径。从类型注解、接口、类等核心特性到模块化开发、工具配置以及与常见前端框架的集成，我们将全面覆盖各个方面。通过阅读本专栏，您将能够提升JavaScript代码的可靠性和可维护性，并为自己的项目提供更好的代码质量和开发效率。让我们一起踏上这个精彩而富有挑战性的TypeScript之旅吧！点击订阅TypeScript入门指南专栏

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2098161.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

实在智能联合案例入选中国信通院2024年度高质量数字化转型案例集

实在智能联合案例入选中国信通院2024年度高质量数字化转型案例集

为推动数字化转型相关产业发展&#xff0c;培育数据要素市场&#xff0c;为数字化双方提供行业实践标杆参考&#xff0c;中国信通院铸基计划于2024年4月初启动高质量数字化转型典型案例征集工作&#xff0c;旨在遴选一批具有产业引领与推广应用效应的企业数字化转型典型案例。实…
阅读更多...
【MySQL】Explain执行计划(十七)

【MySQL】Explain执行计划(十七)

&#x1f697;MySQL学习十七站~ &#x1f6a9;本文已收录至专栏&#xff1a;MySQL通关路 ❤️每章节附章节思维导图&#xff0c;文末附全文思维导图&#xff0c;感谢各位点赞收藏支持~ ⭐学习汇总贴&#xff0c;超详细思维导图&#xff1a;【MySQL】学习汇总(完整思维导图) 一.…
阅读更多...
[python]面向对象示例:学生管理系统

[python]面向对象示例:学生管理系统

python面向对象 python基础知识整理 主要界面 建议跟着框架自行完成功能需求,最下面有完整带注释版本,学生信息会存到当前目录下data.txt文本中,没有则会自行创建 涉及到的知识点 面向对象列表, 字典for, if, input…文件操作 需求分析 开始 -> 循环调用主程序 ->不…
阅读更多...
【GeoSceneWebAdaptor】

【GeoSceneWebAdaptor】

阅读更多...
盲盒小程序开发，探索市场发展优势

盲盒小程序开发，探索市场发展优势

随着潮玩市场的火热&#xff0c;盲盒已经成为了一种集娱乐、社交、消费为一体的模式&#xff0c;越来越多的消费者被盲盒所吸引&#xff0c;盲盒市场也迎来了巨大的发展空间&#xff0c;带来了各种商业机遇&#xff0c;同时为创业者提供新的创业渠道。本文将探讨盲盒小程序的开…
阅读更多...
deepin-wine8-stable为某个windows应用设置环境变量

deepin-wine8-stable为某个windows应用设置环境变量

1 环境说明 deepin v23wine 8.16 2 操作步骤 2.1 在终端指定应用打开注册表编辑 WINEPREFIX~/.deepinwine/com.allroundautomations/ deepin-wine8-stable regeditWINEPREFIX:windows应用在wine容器中的路径&#xff0c;一般为~/.deepinwine/你的应用名称包regedit:注册表编…
阅读更多...
类型组TYPE-POOL

类型组TYPE-POOL

文章目录 创建类型组使用类型组运行结果 创建类型组 使用类型组 *&---------------------------------------------------------------------* *& Report Z_TEST_TYPEPOOL *&---------------------------------------------------------------------* *& *&…
阅读更多...
ClimODE——使用神经网络ODE 进行天气预报

ClimODE——使用神经网络ODE 进行天气预报

概述 论文地址&#xff1a;https://arxiv.org/abs/2404.10024 源码地址&#xff1a;https://github.com/Aalto-QuML/ClimODE.git 这项研究提出了用于天气预报的神经 ODE 系统 ClimODE&#xff0c;该系统的设计特点是通过局部卷积运算获取局部依赖关系&#xff0c;通过全局关注…
阅读更多...
Pycharm虚拟环境中使用pip命令报错ModuleNotFoundError解决办法

Pycharm虚拟环境中使用pip命令报错ModuleNotFoundError解决办法

Pycharm虚拟环境中输入pip 相关命令时报错ModuleNotFoundError,记录一下。 软件版本&#xff1a; windows:win11 Python:3.11.4 PyCharm:转业版 2024.1.3 报错如下&#xff1a; 在虚拟环境中输入pip 相关命令时报错"ModuleNotFoundError: No module named pip._internal…
阅读更多...
基于yolov8的绝缘子缺陷检测系统python源码+onnx模型+评估指标曲线+精美GUI界面

基于yolov8的绝缘子缺陷检测系统python源码+onnx模型+评估指标曲线+精美GUI界面

【算法介绍】 基于YOLOv8的绝缘子缺陷检测系统是一种利用先进深度学习技术的高效解决方案&#xff0c;旨在提升电力行业中输电线路的维护和监控水平。YOLOv8作为YOLO系列算法的最新版本&#xff0c;具备更高的检测速度和精度&#xff0c;特别适用于实时物体检测任务。 该系统…
阅读更多...
【Spring Boot-IDEA创建spring boot项目方法】

【Spring Boot-IDEA创建spring boot项目方法】

1. 使用Spring Initializr 的 Web页面创建项目 2. 使用 IDEA 直接创建项目&#xff0c;其中有两种不同的搭建路径 3. 使用 IDEA 创建Maven项目并改造为springBoot 最常使用的两种方法其实就是一种&#xff0c;这里介绍在ieda中如何搭建 SpringBoot项目。 1.new Project--> 2…
阅读更多...
kafka快速上手

kafka快速上手

一、kafka介绍 Kafka 是一个分布式流媒体平台,类似于消息队列或企业消息传递系统。 kafka官网&#xff1a;http://kafka.apach e.org/ 二、kafka入门 生产者发送消息&#xff0c;多个消费者只能有一个消费者接收到消息生产者发送消息&#xff0c;多个消费者都可以接收到消息 …
阅读更多...
HarmonyOS开发实战（ Beta5版）多线程能力场景化示例最佳实践

HarmonyOS开发实战（ Beta5版）多线程能力场景化示例最佳实践

在介绍Worker和TaskPool的详细使用方法前&#xff0c;我们先简单介绍并发模型的相关概念&#xff0c;以便于大家的理解。 并发模型概述 并发的意思是多个任务同时执行。并发模型分为两大类&#xff1a;基于内存共享的并发模型和基于消息传递的并发模型。 在基于内存共享的并…
阅读更多...
手撕Python之序列类型

手撕Python之序列类型

1.列表---list 索引的使用 当我们有一个数据的时候&#xff0c;我们怎么将这个数据存储到程序呢&#xff1f; 我们定义一个变量&#xff0c;将数据存储在变量中 那么如果有100个数据呢&#xff1f;要定义100个变量吗&#xff1f; 我们是可以用列表这个东西进行多个数据的存…
阅读更多...
单元测试 Mock不Mock？

单元测试 Mock不Mock？

文章目录 前言单元测试没必要?Mock不Mock?什么是Mock?Mock的意义何在? 如何Mock&#xff1f;应该Mock什么&#xff1f;Mock 编写示例 总结 前言 前段时间&#xff0c;我们团队就单元测试是否采用 Mock 进行了一番交流&#xff0c;各有各的说法。本文就单元测试 Mock不Mock…
阅读更多...
11 Java 方法引用、异常处理、Java接口之函数式编程（接口知识补充Function＜T,R＞、BiFunction＜T, U, R＞和自定义泛型接口）

11 Java 方法引用、异常处理、Java接口之函数式编程（接口知识补充Function＜T,R＞、BiFunction＜T, U, R＞和自定义泛型接口）

文章目录 前言一、Java接口之函数式编程 --- 接口知识补充1 Function<T,R>泛型接口2 BiFunction<T, U, R>泛型接口3 自定义泛型函数式编程接口4 使用lambda表达式、方法引用进行函数式编程 二、方法引用1 方法引用初体验&#xff08;以Array.sort()方法为例&#x…
阅读更多...
当了中层才发现：领导根本不在意，你干了多少活

当了中层才发现：领导根本不在意，你干了多少活

在职场的棋盘上&#xff0c;每个人都是一枚棋子&#xff0c;而中层领导则像是那些走在前线的骑士——既要冲锋陷阵&#xff0c;又要运筹帷幄。但你有没有想过&#xff0c;领导真的在意你加班到深夜&#xff0c;或是周末还在回复邮件吗&#xff1f; 当你从基层一步步爬到中层&a…
阅读更多...
Unity(2022.3.41LTS) - UI详细介绍-Slider(滑动条)

Unity(2022.3.41LTS) - UI详细介绍-Slider(滑动条)

目录 零.简介 一、基本功能与用途 二、组件介绍 零.简介 在 Unity 中&#xff0c;Slider&#xff08;滑动条&#xff09;是一个可以滑动的 UI 组件. 一、基本功能与用途 数值调节&#xff1a;主要功能是让用户在一个特定的数值范围内进行选择。例如&#xff0c;可以用于调…
阅读更多...
深度学习之张量（Tensor）的创建、常见属性及数据转换

深度学习之张量（Tensor）的创建、常见属性及数据转换

基本概念 PyTorch会将数据封装成张量&#xff08;Tensor&#xff09;进行计算&#xff0c;所谓张量就是元素为相同类型的多维矩阵。 张量是一个多维数组&#xff0c;通俗来说可以看作是扩展了标量、向量、矩阵的更高维度的数组。张量的维度决定了它的形状&#xff08;Shape&a…
阅读更多...
同城搭子系统小程序开发产品分析

同城搭子系统小程序开发产品分析

1. 市场调研与需求分析 目标用户定位&#xff1a;定义核心用户群&#xff0c;例如上班族、学生、旅游爱好者等。需求收集&#xff1a;运用问卷调查、用户访谈等方法收集用户对功能的具体需求&#xff0c;特别是对安全、便捷性和费用分摊的关注点。竞品分析&#xff1a;分析同类…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023