008-跨域

跨域

  • 什么是跨域?
  • 非同源限制
  • 跨域解决方案
    • CORS
    • JSONP
    • 服务器进行第三方代理
    • webscoket
    • window.postMessage

什么是跨域?

同源策略:协议相同、域名相同、端口号相同 的两个页面被认为是同源。
由一个页面的 js 访问不同源的页面内容,被认为是跨域,跨域是不安全的,会被浏览器拦截掉。

非同源限制

  1. 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
  2. 无法接触非同源网页的 DOM
  3. 无法向非同源地址发送 AJAX 请求

跨域解决方案

CORS

CORS 是跨域资源分享(Cross-Origin Resource Sharing)的缩写。它是 W3C 标准,属于跨源 AJAX 请求的根本解决方法。
服务器端对于CORS的支持,主要是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。

response.setHeader("Access-Control-Allow-Credentials", "true"); 

JSONP

网页通过添加一个<script>元素,向服务器请求 JSON 数据,服务器收到请求后,将数据放在一个指定名字的回调函数的参数位置传回来。

<script src="http://test.com/data.php?callback=dosomething"></script>
// 向服务器test.com发出请求,该请求的查询字符串有一个callback参数,用来指定回调函数的名字// 处理服务器返回回调函数的数据
<script type="text/javascript">function dosomething(res){// 处理获得的数据console.log(res.data)}
</script>

服务器进行第三方代理

💡 Tips:webpack代理请求,proxy代理,Nginx代理,服务器访问第三方服务器等
在这里插入图片描述

webscoket

在这里插入图片描述

let socket = new WebSocket("ws://localhost:3000");
socket.onopen = function(){socket.send("我叫xxx");
}
socket.onmessage = function(e){console.log(e.data);
}

window.postMessage

💡 Tips:它可用于解决以下方面的问题:页面和其打开的新窗口的数据传递,多窗口之间消息传递,页面与嵌套的iframe消息传递

// 父窗口打开一个子窗口
var openWindow = window.open('http://test2.com', 'title');// 父窗口向子窗口发消息(第一个参数代表发送的内容,第二个参数代表接收消息窗口的url)
openWindow.postMessage('Nice to meet you!', 'http://test2.com');
// 监听 message 消息
window.addEventListener('message', function (e) {console.log(e.source); // e.source 发送消息的窗口console.log(e.origin); // e.origin 消息发向的网址console.log(e.data);   // e.data   发送的消息
},false);

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

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

相关文章

Window11 Ubuntu双系统安装

一、制作启动盘 ubuntu下载&#xff1a;https://cn.ubuntu.com/download 启动盘工具&#xff1a;https://cdimage.deepin.com/applications/deepin-boot-maker/windows/deepin-boot-maker.exehttps://cdimage.deepin.com/applications/deepin-boot-maker/windows/deepin-boot…

HTTP代理ip如何助旅游大数据领域?怎么去建立安全代理隧道连接?

HTTP代理IP在旅游大数据领域的应用主要体现在以下几个方面&#xff1a; 数据抓取&#xff1a;旅游大数据的获取往往需要从各种在线旅游平台、社交媒体、评论网站等抓取数据。使用HTTP代理IP可以在抓取过程中隐藏真实IP&#xff0c;避免被目标网站封锁&#xff0c;从而持续、稳定…

LeetCode 刷题 [C++] 第300题.最长递增子序列

题目描述 给你一个整数数组 nums &#xff0c;找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组中的元素而不改变其余元素的顺序。例如&#xff0c;[3,6,2,7] 是数组 [0,3,1,6,2,2,7] 的子序列。 题目…

代码随想录算法训练营第25天|● 216.组合总和|||● 17.电话号码的字母组合

216.组合总和||| 思路:这题和77题的组合思路差不多一样,只是多了一步判断加起来的和是否和目标值相等,并且回溯需要把相应的值减去。 代码: vector<vector<int>> result;vector<int> path;void backtracking(int k,int targetSum,int sum,int startIndex)…

CTP-API开发系列之五:SimNow环境介绍

CTP-API开发系列之五&#xff1a;SimNow环境介绍 CTP-API开发系列之五&#xff1a;SimNow环境介绍SimNow模拟测试环境第一套第二套登录关键字段可视化终端常见问题 CTP-API开发系列之五&#xff1a;SimNow环境介绍 如果你要研发一套国内期货程序化交易系统&#xff0c;从模拟测…

设计模式在芯片验证中的应用——备忘录

1. 前言 软件设计模式定义了一组类和它们之间的关系&#xff0c;它们相互作用用以解决软件开发过程中面临的常见问题。由于验证工程师所做工作的重要部分包括使用面向对象语言(如SystemVerilog)进行编码&#xff0c;因此许多遇到的挑战都适合应用特定的设计模式来解决。将它们…

SCCM部署时遇到的问题:无法连接到SQL Server

根据提示信息逐一排除以下问题&#xff1a; 1、确保SQL服务器名称是否正确。 2、确保TCP1433和4022端口有没有被防火墙屏蔽。 3、站点服务器帐号加入SQLServer的sysadmin角色成员里 、确保SQL实例没有使用动态端口&#xff0c;可参考&#xff1a; Configure SQL Server to…

贪心 Leetcode 763 划分字母区间

划分字母区间 Leetcode 763 学习记录自代码随想录 给你一个字符串 s 。我们要把这个字符串划分为尽可能多的片段&#xff0c;同一字母最多出现在一个片段中。 注意&#xff0c;划分结果需要满足&#xff1a;将所有划分结果按顺序连接&#xff0c;得到的字符串仍然是 s 。 返…

题目 1572: 蓝桥杯-进制转换

题目描述: 程序提示用户输入三个字符&#xff0c;每个字符取值范围是0-9&#xff0c;A-F。然后程序会把这三个字符转化为相应的十六进制整数&#xff0c;并分别以十六进制&#xff0c;十进制&#xff0c;八进制输出。 代码: package lanqiao;import java.util.*;public clas…

重新启动vue-shop-maseter主支任务

以下是命令行&#xff0c;cmd任务管理程序进程中… 这部分是部分源码&#xff0c;用H5编辑器写的 等待慢慢启动重启中。。。。 然而没有反应&#xff0c;不知道为什么&#xff1f; 花里胡哨的&#xff0c;更加没看懂了。 我这暴脾气&#xff0c;气得我直接一顿乱敲 要怎…

C语言基础练习——Day01

目录 选择题 编程题 打印从1到最大的n位数 计算日期到天数转换 选择题 1、执行下面程序&#xff0c;正确的输出是 int x5,y7; void swap(int x, int y) {int z;zx;xy;yz; } int main() { int x3,y8; swap(int x, int y);printf("%d,%d\n"&#xff0c;x, y);return …

vue3怎么设置路由 Vue Route

1. 安装Vue Router npm install vue-router 2. 创建Home.vue组件 在 src/views 目录下创建一个名为 Home.vue 的文件&#xff1a; <!-- <template> 标签是Vue组件的模板部分&#xff0c;其中包含了组件的HTML结构。 --> <template><div><h1>…

2024年最新阿里云服务器地域选择方法,以及可用区说明

阿里云服务器地域和可用区怎么选择&#xff1f;地域是指云服务器所在物理数据中心的位置&#xff0c;地域选择就近选择&#xff0c;访客距离地域所在城市越近网络延迟越低&#xff0c;速度就越快&#xff1b;可用区是指同一个地域下&#xff0c;网络和电力相互独立的区域&#…

iostat命令详解

转载说明&#xff1a;如果您喜欢这篇文章并打算转载它&#xff0c;请私信作者取得授权。感谢您喜爱本文&#xff0c;请文明转载&#xff0c;谢谢。 iostat是一个使用频率较高的命令&#xff0c;主要用来统计和输出CPU和磁盘IO信息。它的安装很简单&#xff1a; # yum -y insta…

【PyQt】16-剪切板的使用

文章目录 前言一、代码疑惑快捷键 二、现象2.1 复制粘贴文本复制粘贴 2.2 复制粘贴图片复制粘贴 2.3 复制粘贴网页 总结 前言 1、剪切板的使用 2、pycharm的编译快捷键 3、类的属性和普通变量的关系 4、pyqt应该养成的编程习惯-体现在代码里了&#xff0c;自己看看。 一、代码…

PyTorch搭建LeNet测试集实现

搭建神经网络请看PyTorch搭建LeNet神经网络-CSDN博客 实现训练集请看PyTorch搭建LeNet训练集详细实现-CSDN博客 测试集比较简单&#xff0c;直接上代码。 代码实现 # 导包 不必多说 import torch import torchvision.transforms as transforms from PIL import Image from …

Spring三种依赖注入的方式

一.Spring三种依赖注入的方式 Setter注入 注解方式 Controller public class TestController {private TestService testService;Autowiredpublic void setTestService(TestService testService) {this.testService testService;} }XML方式 <bean id"testController&q…

ContentType类型总结

ContentType类型总结 Content-Type是一个HTTP头部字段&#xff0c;用于指示资源的媒体类型&#xff08;MIME类型&#xff09;&#xff0c;以及可选的字符集和编码方式。它告诉浏览器或其他客户端如何解释接收到的数据。以下是一些常见的Content-Type类型及其用途&#xff1a; t…

并发支持库(1)-线程

线程允许多个程序任务在统一时间执行&#xff0c;不同的线程可以共享内存空间&#xff0c;每个线程也有自己的栈空间。 线程类 thread 类thread表示单个执行线程。线程在thread构造对象时开始执行。每个thread对象表示唯一的一个线程&#xff0c;thread不支持复制构造和复制…

Python函数嵌套与参数你学会了吗

如何在函数中调用其他函数&#xff0c;以及如何定义和使用函数参数。函数嵌套可以调用其他函数&#xff0c;参数列表用于封装函数中的未知数据&#xff0c;参数在函数调用时被替换。形参和实参数量需一致&#xff0c;但名字可以相同。 1.函数嵌套 一个函数中可以调用别的函数 …