跨域相关的一些问题 ✅

news2024/11/28 23:56:43

当网页从一个源（https://baidu.com）请求另一个源（如 https://taobao/api）的资源时，就发生了跨域。由于安全原因（防止恶意网站通过脚本访问用户在其他网站上的数据），浏览器对跨域请求设置了限制，这样的机制称为同源策略。

浏览器特有的现象

应该说，跨域不是浏览器特有的现象，跨域几乎在所有客户端都存在，但是同源策略是浏览器特有的。当你在浏览器中执行 AJAX 请求，浏览器首先会检查此请求的源是否合法（即与当前页面的源是否相同）。如果请求是跨域的，浏览器会立即阻止该请求发送（后端会连请求都收不到）。

但是微信小程序，桌面应用和APP等客户端应用是不会受到同源策略的直接限制的，因为他们运行的客户端环境并不是浏览器，但是他们需要遵守的是所处的运行环境的其他规范。比如微信小程序上线后能请求的API必须用的是https协议，而且能请求哪些域名下的API必须在后台自己的小程序管理下面进行登记 （没记错的话，上一次开发小程序至今已有一坤年） ，开发环境下倒是无所谓。

假设我在浏览器端和在微信小程序端同时发送一个请求给后端，那后端收到的请求头分别长什么样子？以下只对比一些关键字段：

1️⃣ 浏览器

  • User-Agent：用来标识当前浏览器类型和版本，例如：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36
  • Referer：重头戏，指示请求来源的 URL，在JavaScript里面对这个字段能进行的修改极端有限，甚至可以说没有，Referer 的值是由浏览器自动设置的。
  • Accept：表示浏览器可以处理的内容类型
  • Cookie：如果有的话

2️⃣ 微信小程序

  • User-Agent：微信小程序的请求头中的 User-Agent 会有不同的格式，通常包含 “MicroMessenger” 字样，例如：Mozilla/5.0 (Linux; Android 10; SM-G9500 Build/QP1A.190711.020; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/12.0 WeChat/8.0.0.1 MiniProgramPlatform/1.0.0.0
  • Referer：微信小程序可以设置特定的 Referer，但也不是在开发过程中能够通过JavaScript来控制的，在使用wx.request的时候Referer由小程序框架自动填充，通常会被设置为小程序的合法请求域名，即你在小程序后台配置的接口域名
  • Accept：通常为*/*
  • Cookie：如果有的话

处理跨域问题（浏览器端）

CORS

首先得知道，CORS并没有直接作用于客户端，CORS配置是服务端的响应头配置，比较关键的字段是以下两个：

const responseHeaders = {
    "Access-Control-Allow-Origin": "*" // 允许跨域请求的域名
    "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS" // 允许跨域请求的方法
}

它规定了哪些方法，来自哪些域名的请求可以成功调用服务端的接口，这保护的是服务端的安全性。当浏览器发送跨域请求时，服务器通过 CORS 响应头（如 Access-Control-Allow-Origin）来告诉浏览器是否允许该请求，具体来说，服务器在返回的 HTTP 响应中添加 CORS 相关的头部信息，允许特定的源进行访问。

到目前为止，CORS的作用还是停留在对服务器的保护上，但是却抛出了一个问题💡：如果我的请求被浏览器的同源策略所拦截，我压根发不出去，更不可能知道响应头的Access-Control-Allow-Origin到底是什么，那我的AJAX岂不一辈子都发不出去？

所以OPTIONS，预检请求登场。OPTIONS 请求是一种 HTTP 请求方法，用于查询服务器支持的 HTTP 方法及其他选项，而不是直接请求特定资源。根据 CORS 规范，预检请求通常在以下情况下发送：
1️⃣ 请求方法为 PUT、DELETE、PATCH、OPTIONS，或其他非 GET 和 POST 的方法
2️⃣ 如果 Content-Type 头为除 application/x-www-form-urlencoded、multipart/form-data 或 text/plain 以外的任何值（例如 application/json）
3️⃣ 当请求中包含自定义头部（例如 X-Requested-With）
如果OPTIONS询问目标服务器后发现自己的接下来要发送的请求能够符合服务器那边的CORS配置，那同源策略就会放行，AJAX就能发到后端。

顺便提一嘴，开发微信小程序有时候也得后端配合设置CORS，说不定你的referer一开始没在人家的白名单里呢。

JSONP

JSONP算一种投机取巧的方法，在如果服务器是团队内部的，那还是用CORS。 JSON是不受同源策略限制的，但是这种方法只能支持GET请求而且相对不安全。 至今不知道不安全在哪，被攻击到的我觉得是服务端而不是客户端。

给一个demo，后端用了Egg：

// router.js
module.exports = (app) => {
  const { router, controller } = app;
  // JSONP 数据接口
  router.get('/api/data', controller.home.getData); 
};

// home.js
const Controller = require('egg').Controller;
class HomeController extends Controller {
  async getData() {
    const { ctx } = this;
    // 获取回调函数名（来自query传参数）
    const callback = ctx.query.callback; 
    // 要返回的数据
    const data = { message: 'Hello from Egg.js!' }; 
    // 检查是否提供了callback参数
    if (callback) {
      ctx.body = `${callback}(${JSON.stringify(data)})`; // 返回 JSONP 响应
    } else {
      ctx.body = { error: 'No callback provided' }; // 返回错误
    }
  }
}
module.exports = HomeController;

前端：

<script>
  function handleResponse(data) {
    // 处理返回的 JSONP 数据
    console.log(data);
    document.getElementById("result").innerText = data.message;
  }

  function fetchData() {
    const script = document.createElement("script");
    script.src = "http://localhost:7001/api/data?callback=handleResponse"; // 注意 CORS 端口应与后端一致
    document.body.appendChild(script); // 动态插入 script 标签进行 JSONP 请求
  }
</script>

但是这种script标签的用法和开发中用的比较多的用script来下载其他库不是一回事。
使用 script 标签发起 JSONP 请求的目的是从不同源（跨域）获取数据。服务端会以一个可调用的 JavaScript 函数的形式返回数据，以便前端能够在加载该脚本后执行回调函数来处理数据。
而用它来加载库是为了引入第三方 JavaScript 代码，以便在你的网页中使用这些库提供的功能。加载后的库通常会直接在全局范围内注册变量。

Proxy

在同源服务器上设置代理，通过中间的服务器转发请求，浏览器请求的是同源服务器，从而绕过同源策略。比较常用的是Nginx的反向代理功能，开发中Webpack和Vite都提供了开启内置的反向代理服务器的功能。
既然要浏览器请求的是同源服务器，那axios里面的url就不能是真正的API URL，而应该是前端应用的生产环境URL，然后在Nginx内做了一次转发，把请求转发到后端服务器去。这种代理和典型的反向代理。

提一嘴正向代理和方向代理。
反向代理是指客户端通过代理服务器发起请求。1️⃣ 客户端只把请求发到代理服务器 2️⃣ 代理服务器接收请求，并根据负载均衡策略或配置将请求转发给一个或多个后端服务器 3️⃣ 后端服务器处理请求后，将响应返回给反向代理服务器 4️⃣ 反向代理服务器再将响应转发回客户端。
如果说反向代理是作用于服务端，那正向代理就是作用于客户端，通常是为了匿名、绕过限制、内容过滤等，比如翻墙用的就是正向代理。了解实在有限，以后再研究研究

iframe标签

可以用iframe实现跨域请求，但是我没用过，甚至连这个标签我都用的很少。

先创建一个主页面，其中嵌入了另一个跨域的页面：

<script>
  function sendMessage() {
      const iframe = document.getElementById('myIframe');
      // 发送消息给 iframe
      iframe.contentWindow.postMessage('Hello from the main page!', '*');
  }
  window.addEventListener('message', (event) => {
      // 监听来自 iframe 的消息
      console.log('Received from iframe:', event.data);
      document.getElementById('result').innerText = event.data;
  });
</script>
<body>
    <h1>主页面</h1>
    <button onclick="sendMessage()">发送消息到iframe</button>
    <div id="result"></div>
    <iframe id="myIframe" src="https://example.com" width="600" height="400"></iframe>
</body>

再创建一个跨域页面iframe.html，必须支持接收消息和发送响应：

<script>
  window.addEventListener('message', (event) => {
      // 监听主页面发送的消息
      console.log('Received from main page:', event.data);
      const result = fetch(..........)
      // 发送响应回主页面
      event.source.postMessage('Hello from the iframe!', result);
  });
</script>

运行方法：

  1. 将主页面的 index.html 文件放在一个能够访问的 Web 服务器上。
  2. 将跨域页面的 iframe.html 放在另一个可以访问的地址上（务必符合跨源域）。
  3. 在主页面上，通过点击按钮“发送消息到 iframe”，会发送一个消息给嵌入的 iframe。
  4. iframe 页面接收到消息后，会回复一个消息，主页面也会接收到这个回复。

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

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

相关文章

python excel接口自动化测试框架！

python excel接口自动化测试框架！

今天采用Excel继续写一个接口自动化测试框架。 设计流程图 这张图是我的excel接口测试框架的一些设计思路。 首先读取excel文件&#xff0c;得到测试信息&#xff0c;然后通过封装的requests方法&#xff0c;用unittest进行测试。 其中&#xff0c;接口关联的参数通过正则进…
阅读更多...
[RabbitMQ] 重试机制+TTL+死信队列

[RabbitMQ] 重试机制+TTL+死信队列

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏: &#x1f9ca; Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 &#x1f355; Collection与…
阅读更多...
前端入门之VUE--基础与核心

前端入门之VUE--基础与核心

前言 VUE是前端用的最多的框架&#xff1b;这篇文章是本人大一上学习前端的笔记&#xff1b;欢迎点赞 收藏 关注&#xff0c;本人将会持续更新。 Vue学习笔记 用于构建用户界面的渐进式框架 构建用户界面&#xff1a;基于数据动态渲染页面渐进式&#xff1a;循序渐近的学…
阅读更多...
java基础知识(常用类)

java基础知识(常用类)

目录 一、包装类（Wrapper) （1）包装类与基本数据的转换 （2）包装类与String类型的转换 （3）Integer类和Character类常用的方法 二、String类 （1）String类介绍 1)String 对象用于保存字符串，也就是一组字符序列 2)字符串常量对象是用双引号括起的字符序列。例如:&quo…
阅读更多...
嵌入式驱动开发详解2（设备挂载问题）

嵌入式驱动开发详解2（设备挂载问题）

文章目录 前言设备号设备号的组成设备号的分配静态分配动态分配 驱动挂载与卸载设备节点创建驱动挂载出现问题 前言 驱动的设备挂载和卸载是十分重要的内容&#xff0c;一旦操作不当可能会导致系统崩溃&#xff0c;接下来我将用字符设备的驱动挂载原理进行详细讲解&#xff0c…
阅读更多...
谈谈微服务的常用组件

谈谈微服务的常用组件

由于微服务给系统开发带来了一些问题和挑战&#xff0c;如服务调用的复杂性、分布式事务的处理、服务的动态管理等&#xff0c;为了更好地解决这些问题和挑战&#xff0c;各种微服务治理的组件应运而生&#xff0c;充当微服务架构的基石和支撑&#xff0c;常用组件如下表&#…
阅读更多...
【数字图像处理+MATLAB】通过迭代全局阈值处理算法（Iterative Global Algorithm）实现图像分割

【数字图像处理+MATLAB】通过迭代全局阈值处理算法（Iterative Global Algorithm）实现图像分割

引言 图像分割是将数字图像划分为多个区域&#xff08;或像素的集合&#xff09;的过程&#xff0c;这些区域通常对应于真实世界的物体或图像中的特定部分。图像分割的目标是简化或改变图像的表示形式&#xff0c;使得图像更容易理解和分析。图像分割通常用于定位图像中的物体…
阅读更多...
【三维生成】Edify 3D:可扩展的高质量的3D资产生成（英伟达）

【三维生成】Edify 3D:可扩展的高质量的3D资产生成（英伟达）

标题&#xff1a;Edify 3D: Scalable High-Quality 3D Asset Generation 项目&#xff1a;https://research.nvidia.com/labs/dir/edify-3d demo&#xff1a;https://build.nvidia.com/Shutterstock/edify-3d 文章目录 摘要一、前言二、多视图扩散模型2.1.消融研究 三、重建模型…
阅读更多...
在SQLyog中导入和导出数据库

在SQLyog中导入和导出数据库

导入 假如我要导入一个xxx.sql&#xff0c;我就先创建一个叫做xxx的数据库。 然后右键点击导入、执行SQL脚本 选择要导入的数据库文件的位置&#xff0c;点击执行即可 注意&#xff1a; 导入之后记得刷新一下导出 选择你要导出的数据库 右键选择&#xff1a;备份/导出、…
阅读更多...
HDR视频技术之三：色度学与颜色空间

HDR视频技术之三：色度学与颜色空间

HDR 技术的第二个理论基础是色度学。从前面的内容中可以了解到&#xff0c;光学以及人类视觉感知模型为人类提供了解释与分析人类感知亮度的理论基础&#xff0c;但是 HDR 技术不仅仅关注于提升图像与视频的亮度范围&#xff0c;同时也关注于提供更加丰富的色彩。因此&#xff…
阅读更多...
通信与网络安全之IPSEC

通信与网络安全之IPSEC

IPSec&#xff08;IP Security&#xff09;是IETF制定的为保证在Internet上传送数据的安全保密性能的三层隧道加密协议。IPSec在网络层对IP报文提供安全服务。IPSec协议本身定义了如何在IP数据包中增加字段来保证IP包的完整性、 私有性和真实性&#xff0c;以及如何加密数据包。…
阅读更多...
Redis的管道操作

Redis的管道操作

在现代应用程序中&#xff0c;Redis作为一种高性能的内存数据库&#xff0c;被广泛用于缓存、消息队列、实时分析等场景。为了进一步提高Redis的性能&#xff0c;Redis提供了管道&#xff08;Pipeline&#xff09;操作&#xff0c;允许客户端将多个命令一次性发送到服务器&…
阅读更多...
67 mysql 的 间隙锁

67 mysql 的 间隙锁

前言 我们这里主要是 来看一下 mysql 中的 间隙锁 间隙锁 主要存在的地方一般就是在 查询主键查询不到, 索引查询查询不到 的场景 然后 我们这里来调试一下 这里的整个流程, 间隙锁的加锁 以及 间隙锁的使用, 以及 间隙锁的释放 从逻辑上来说 间隙锁 锁定的是一个区间, 按照…
阅读更多...
小米PC电脑手机互联互通，小米妙享，小米电脑管家，老款小米笔记本怎么使用，其他品牌笔记本怎么使用，一分钟教会你

小米PC电脑手机互联互通，小米妙享，小米电脑管家，老款小米笔记本怎么使用，其他品牌笔记本怎么使用，一分钟教会你

说在前面 之前我们体验过妙享中心&#xff0c;里面就有互联互通的全部能力&#xff0c;现在有了小米电脑管家&#xff0c;老款的笔记本竟然用不了&#xff0c;也可以理解&#xff0c;毕竟老款笔记本做系统研发的时候没有预留适配的文件补丁&#xff0c;至于其他品牌的winPC小米…
阅读更多...
Apache Zeppelin：一个基于Web的大数据可视化分析平台

Apache Zeppelin：一个基于Web的大数据可视化分析平台

今天给大家推荐一下 Apache Zeppelin&#xff0c;它是一个基于 Web 的交互式数据接入、数据分析、数据可视化以及协作文档 Notebook&#xff0c;类似于 Jupyter Notebook。 Apache Zeppelin 支持使用 SQL、Java、Scala、Python、R 等编程语言进行数据处理和分析&#xff0c;同时…
阅读更多...
彻底理解如何保证ElasticSearch和数据库数据一致性问题

彻底理解如何保证ElasticSearch和数据库数据一致性问题

一.业务场景举例 需求&#xff1a; 一个卖房业务&#xff0c;双十一前一天&#xff0c;维护楼盘的运营人员突然接到合作开发商的通知&#xff0c;需要上线一批热门的楼盘列表&#xff0c;上传完成后&#xff0c;C端小程序支持按楼盘的名称、户型、面积等产品属性全模糊搜索热门…
阅读更多...
EasyExcel: 结合springboot实现表格导出入(单/多sheet), 全字段校验,批次等操作(全)

EasyExcel: 结合springboot实现表格导出入(单/多sheet), 全字段校验,批次等操作(全)

全文目录,一步到位 1.前言简介1.1 链接传送门1.1.1 easyExcel传送门 2. Excel表格导入过程2.1 easyExcel的使用准备工作2.1.1 导入maven依赖2.1.2 建立一个util包2.1.3 ExcelUtils统一功能封装(单/多sheet导入)2.1.4 ExcelDataListener数据监听器2.1.5 ResponseHelper响应值处理…
阅读更多...
前端实用知识-用express搭建本地服务器

前端实用知识-用express搭建本地服务器

目录 一、为什么会有这篇文章&#xff1f; 二、使用前的准备-如环境、工具 三、如何使用&#xff1f;-express常用知识点 四、代码演示-配合截图&#xff0c;简单易懂 一、为什么会有这篇文章&#xff1f; 在日常前端开发中&#xff0c;我们离不开数据&#xff0c;可能是用…
阅读更多...
Redis（概念、IO模型、多路选择算法、安装和启停）

Redis（概念、IO模型、多路选择算法、安装和启停）

一、概念 关系型数据库是典型的行存储数据库&#xff0c;存在的问题是&#xff0c;按行存储的数据在物理层面占用的是连续存储空间&#xff0c;不适合海量数据存储。 Redis在生产中使用的最多的是用作数据缓存。 服务器先在缓存中查询数据&#xff0c;查到则返回&#xff0c;…
阅读更多...
C#基础控制台程序

C#基础控制台程序

11.有一个54的矩阵&#xff0c;要求编程序求出其中值最大的那个元素的值&#xff0c;以及其所在的行号和列号。 12.从键盘输入一行字符&#xff0c;统计其中有多少个单词&#xff0c;单词之间用空格分隔开。 13.输入一个数&#xff0c;判断它是奇数还是偶数&#xff0c;如果…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023