跨域和跨域解决方案

跨域

制定HTML规则时,出于安全的考虑,一个源的网站不允许与另一个源的资源进行交互,浏览器制定此规则为同源策略

同源即指的网站具有相同的域,即 协议(protocol)、主机(host)、端口号(port)  相同。

跨域资源嵌入是允许的,但是浏览器限制了Javascript不能与加载的内容进行交互,如嵌入的<script>、<img>、<link>、<iframe>等。

受限的场景

  • XHR请求不能发送。
  • 无法对跨域请求的资源进行修改。
  • 不同源的CookieLocalStorage无法读取。

跨域解决方案

JSONP跨域请求数据

由于<script>可以对跨域资源进行请求,于是可以对DOM动态地append一个<script>并添加src且携带一个callback函数名,待请求完成后调用callback

//前端
function jsonpHandle(data){console.log(data);} //首先定义函数,请求完成后会携带参数调用函数
var url = "http://127.0.0.1/test.php?callback=jsonpHandle";
var obj = $('<script></script>');
obj.attr("src",url);
$("body").append(obj); // 动态地添加一个scriptCopy to clipboardErrorCopied
// 后端配合实现
$data = ["a" => 1, "b" => 2];
$callback = $_GET['callback'];
return $callback."(".json_encode($data).")";Copy to clipboardErrorCopied

CORS跨域

对于简单请求,浏览器会直接发送CORS请求,具体说来就是在header中加入origin请求头字段。同样,在响应头中,返回服务器设置的相关CORS头部字段,Access-Control-Allow-Origin字段为允许跨域请求的源。请求时浏览器在请求头的Origin中说明请求的源,服务器收到后发现允许该源跨域请求,则会成功返回。
对于非简单请求,浏览器会自动先发送一个options请求,如果发现服务器支持该请求,则会将真正的请求发送到后端,反之,如果浏览器发现服务端并不支持该请求,则会在控制台抛出错误。

//响应头 Response Headers
header('Content-Type: text/html;charset=utf-8');
header('Access-Control-Allow-Origin:http://localhost:8080'); // *代表允许任何网址请求
header('Access-Control-Allow-Methods:POST,GET'); // 允许请求的类型
header('Access-Control-Allow-Credentials: true'); // 设置是否允许发送 cookies
header('Access-Control-Allow-Headers: Content-Type,Origin,Refer'); // 允许自定义请求头的字段 Copy to clipboardErrorCopied

Nginx代理

通过代理的手段,监听同一端口添加不同路径实现不同服务的跨域访问。

location  /test
{proxy_pass   http://127.0.0.1:81;
}Copy to clipboardErrorCopied

图片ping

直接新建一个<img>,然后在地址中存放一些简单数据,这种方法只支持get请求,且只能单向地向服务器发送请求,在统计广告曝光次数中比较常见,XSS攻击也常用其获取cookie

<img src="http://127.0.0.1?key=value">Copy to clipboardErrorCopied

相同主域document.domain

例如对于www.example.comabc.example.com,其主域名是一样的。

document.domain = "example.com"; //相同主域
var ifrWin = document.getElementById("ifr").contentWindow; //可以操作iframeCopy to clipboardErrorCopied

window.name共享数据

不同域的iframe把共享的信息放在window.name里面,此方法只适用于两个iframe之间的跨域。

window.name = JSON.stringify({"a":1,"b":2})Copy to clipboardErrorCopied

window.postMessage

使用window.postMessage来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,这种方法不能和服务端交换数据。

//主window
window.frames[0].postMessage({"a":1},"http://127.0.0.1:81")
//iframe //出于安全考虑验证来源
window.addEventListener('message',(event)=>{if(event.origin === "http://127.0.0.1") console.log(event.data);
});

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

力扣 | 234. 回文链表

用到快慢指针&#xff01; /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* ListNode(int val) { this.val val; }* ListNode(int val, ListNode next) { this.val val; this.next next;…

SQLite的PRAGMA 声明

PRAGMA 语句是特定于 SQLite 的 SQL 扩展&#xff0c;用于 修改 SQLite 库的操作或查询 SQLite 库 内部&#xff08;非表&#xff09;数据。PRAGMA声明使用相同的 接口作为其他 SQLite 命令&#xff08;例如 SELECT、INSERT&#xff09;但 在以下重要方面有所不同&#xff1a; …

ZooKeeper分布式服务与Kafka消息队列+ELKF整合方案

前言 ZooKeeper 是一个分布式的、开放源码的分布式应用程序协调服务&#xff0c;提供配置维护、命名服务、分布式同步、组服务等功能&#xff1b; Kafka 是一个开源的分布式流处理平台&#xff0c;它被设计用来处理实时数据流&#xff0c;包括发布和订阅消息系统、日志收集以…

叉车载货出入库AI检测算法介绍及应用

随着物流行业的快速发展&#xff0c;叉车作为物流运输的重要设备&#xff0c;其安全性和效率性越来越受到人们的关注。然而&#xff0c;在实际操作中&#xff0c;由于人为因素和操作环境的复杂性&#xff0c;叉车事故时有发生&#xff0c;给企业和个人带来了巨大的损失。为了提…

HarmonyOS开发实例:【app帐号管理】

应用帐号管理 介绍 本示例选择应用进行注册/登录&#xff0c;并设置帐号相关信息&#xff0c;简要说明应用帐号管理相关功能。效果图如下&#xff1a; 效果预览 使用说明参考鸿蒙文档&#xff1a;qr23.cn/AKFP8k点击或者转到。 1.首页面选择想要进入的应用&#xff0c;首次进…

JetBrains PhpStorm 2024.1 发布 - 高效智能的 PHP IDE

JetBrains PhpStorm 2024.1 发布 - 高效智能的 PHP IDE 请访问原文链接&#xff1a;JetBrains PhpStorm 2024.1 (macOS, Linux, Windows) - 高效智能的 PHP IDE&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;sysin.org JetBrains PhpSt…

每日一题 第八十八期 洛谷 滑动窗口

滑动窗口 /【模板】单调队列 题目描述 有一个长为 n n n 的序列 a a a&#xff0c;以及一个大小为 k k k 的窗口。现在这个从左边开始向右滑动&#xff0c;每次滑动一个单位&#xff0c;求出每次滑动后窗口中的最大值和最小值。 例如&#xff0c;对于序列 [ 1 , 3 , − …

C语言: 字符串函数(下)

片头 在上一篇中,我们介绍了字符串函数。在这一篇章中&#xff0c;我们将继续学习字符串函数&#xff0c;准备好了吗&#xff1f;开始咯&#xff01; 1.strncpy函数 1.1 strncpy函数的用法 strncpy是C语言中的一个字符串处理函数&#xff0c;它用于将一个字符串的一部分内容…

【Linux】linux 在指定根目录下,查找wav文件并删除

要在Linux的指定根目录下查找.wav文件并删除它们&#xff0c;您可以使用find命令结合-exec选项来执行删除操作。请注意&#xff0c;这个操作是不可逆的&#xff0c;所以在执行之前请确保您知道自己在做什么&#xff0c;并且已经备份了重要数据。 以下是一个示例命令&#xff0…

C++ | Leetcode C++题解之第14题最长公共前缀

题目&#xff1a; 题解&#xff1a; class Solution { public:string longestCommonPrefix(vector<string>& strs) {if (!strs.size()) {return "";}int minLength min_element(strs.begin(), strs.end(), [](const string& s, const string& t)…

TL431内部架构学习

在V/I转换那个篇章里面看到了TL431的内部架构,那我们这一篇一点点的解析TL431的构成,首先TL431的内部详细原理图如下图1所示,为了便于理解我对管子进行了标注,倒时候我们好分析 图1:TL431内部原理图 拿到原理图后我们先简单的拆分,Q10和Q11就是达林顿管,控制Cathode的电压的Q2…

18.java openCV4.x 入门- Imgproc之色彩映射及颜色空间转换

专栏简介 &#x1f492;个人主页 &#x1f4f0;专栏目录 点击上方查看更多内容 &#x1f4d6;心灵鸡汤&#x1f4d6;我们唯一拥有的就是今天&#xff0c;唯一能把握的也是今天建议把本文当作笔记来看&#xff0c;据说专栏目录里面有相应视频&#x1f92b; &#x1f9ed;文…

Python | Leetcode Python题解之第26题删除有序数组中的重复项

题目&#xff1a; 题解&#xff1a; class Solution:def removeDuplicates(self, nums: List[int]) -> int:if not nums:return 0n len(nums)fast slow 1while fast < n:if nums[fast] ! nums[fast - 1]:nums[slow] nums[fast]slow 1fast 1return slow

设计模式详解(十四)——策略模式

策略模式简介 策略模式定义 策略模式&#xff08;Strategy Pattern&#xff09;是一种行为型设计模式&#xff0c;它使能在运行时改变对象的行为。策略模式属于对象行为模式&#xff0c;它定义了一系列的算法&#xff0c;并将每一个算法封装起来&#xff0c;使它们可以互相替换…

【央国企专场】——国家电网

国家电网目录 一、电网介绍1、核心业务2、电网组成 二、公司待遇三、公司招聘1、招聘平台2、考试安排2.3 考试内容 一、电网介绍 1、核心业务 国家电网公司&#xff08;State Grid Corporation of China&#xff0c;简称SGCC&#xff09;是中国最大的国有企业之一&#xff0c…

第三周周一技术课讲义

第三周周一技术课讲义 条件控制语句 break 不能单独存在的。可以用在switch和循环中&#xff0c;表示结束&#xff0c;跳出的意思。 代码示例&#xff1a; //1.找出100-1000中前5个79的倍数 ​ int j 0; //用来计数 for (int i 100; i < 1000; i) {if(i % 79 0){j; …

LeetCode 热题 100 题解(二):双指针部分(2)| 滑动窗口部分(1)

题目四&#xff1a;接雨水&#xff08;No. 43&#xff09; 题目链接&#xff1a;https://leetcode.cn/problems/trapping-rain-water/description/?envTypestudy-plan-v2&envIdtop-100-liked 难度&#xff1a;困难 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&am…

树的总结学习

一、树的遍历 其实深度优先遍历&#xff1a;是指先序、中序和后序&#xff0c;广度优先就是层序遍历。 ①、先序遍历 void PreOrder(BTNode *b) {if(b ! NULL){std::cout << b->data << std::endl;PreOrder(b->left);PreOrder(b->right);} } ②、中序…

如何将三方库集成到hap包中——通过IDE集成非cmake方式构建的C/C++三方库

简介 DevEco Studio(简称IDE)目前只支持cmake构建方式&#xff0c;对于非cmake构建方式的三方库需要通过IDE工具集成的话&#xff0c;我们需要对原生库编写一个cmake的构建脚本。本文通过tinyxpath三方库为例介绍如何在IDE上移植一个非cmake构建方式的三方库。 cmake构建脚本…

中拔出溜的公司如何实施DEVOPS

虽然推进起来很艰难&#xff0c;但在这类公司也并非一无是处&#xff1a;只要让各方尤其是领导曾看到了成效&#xff0c;大范围铺开很容易&#xff0c;你也非常容易因此变得出众。 0. 标题 1. 中拔出溜公司的特点2. 循序渐进2.1 从研发团队开始2.2 先CI&#xff08;持续集成&am…