什么是跨域,怎么解决跨域?

article/2025/10/3 17:13:01
1.什么是跨域
跨域是指浏览器不能执行其他网站的脚本。它是浏览器同源策略造成的,是浏览器对JS实施的安全限制。

2.常见的跨域场景

3.什么是同源策略? (所谓同源是指:“域名”、“协议”、“端口”均为相同)
同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。
同源策略限制以下行为
1. Cookie、LocalStorage 和 IndexDB 无法读取
2. DOM 和 Js对象无法获得
3. AJAX 请求不能发送
注意:跨域限制是浏览器的机制,如果直接在服务端请求,是不会触发跨域限制的。

4.跨域的解决办法?
jsonp跨域
jsonp跨域是JavaScript设计模式中的一种代理模式。在html页面中通过相应标签从不同域名下加载静态资源文件是被浏览器允许的,
所以我们可以通过这个“犯罪漏洞”来进行跨域。一般,我们可以动态的创建script标签,再去请求一个带参网址来实现跨域通信
// 原生的实现方式 
let script = document.createElement('script'); 
script.src = 'http://www.wxyweb.com'; document.body.a(script)function callback(res) { console.log(res)
}
// jquery实现
$.ajax({url:'http://www.nealyang.cn/login', type:'GET', dataType:'jsonp',   // 请求方式为jsonp(jsonp 非官方的数据交互协议)jsonpCallback:'callback',data:{"username":"Nealyang"} 
})
* 虽然这种方式非常好用,但是一个最大的缺陷是,只能够实现get请求

5.跨域解决方案:
1.通过jsonp跨域
2.document.domain + iframe跨域
3.location.hash + iframe
4.window.name + iframe跨域
5.postMessage跨域
6.跨域资源共享(CORS)
7.nginx代理跨域
8.nodejs中间件代理跨域
9.WebSocket协议跨域

6.什么是JSONP?
JSONP(JSON with Padding)是资料格式 JSON 的一种“使用模式”,可以让网页从别的网域要资料。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com 的服务器沟通,
而 HTML 的 script 元素是一个例外。利用 script 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。

7.什么是JSON?

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。

JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。 这些特性使JSON成为理想的数据交换语言。

8. JSON的优点:

1.基于纯文本,跨平台传递极其简单;

2.Javascript原生支持,后台语言几乎全部支持;

3.轻量级数据格式,占用字符数量极少,特别适合互联网传递;

4.可读性较强,虽然比不上XML那么一目了然,但在合理的依次缩进之后还是很容易识别的;

5.容易编写和解析;

9.json 和 jsonp 的区别?

JSON是一种数据交换格式(采用键值对的方式,无序组合,数组是有序组合),而JSONP是一种非官方跨域数据交互协议。

10. 跨域资源共享(CORS)

CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。

它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。

普通跨域请求:只服务端设置Access-Control-Allow-Origin即可,前端无须设置,若要带cookie请求:前后端都需要设置。

目前,所有浏览器都支持该功能,CORS也已经成为主流的跨域解决方案。

11. JSONP 和 CORS 比较

JSONP 只能实现 GET 请求,而 CORS 支持所有类型的 HTTP 请求。使用 CORS ,开发者可以是使用普通的 XMLHttpRequest 发起请求和获取数据,比起 JSONP 有更好的错误处理。虽然绝大多数现代的浏览器都已经支持 CORS,但是 CORS 的兼容性比不上 JSONP,一些比较老的浏览器只支持 JSONP


http://chatgpt.dhexx.cn/article/ejFwMCpu.shtml

相关文章

最常见的六种跨域解决方案

目录: 前言:什么是跨域?JSONPCORS搭建Node代理服务器Nginx反向代理postMessageWebsocket总结 前言:什么是跨域? 跨域就是当在页面上发送ajax请求时,由于浏览器同源策略的限制,要求当前页面和…

什么是跨域?跨域解决方法

一、为什么会出现跨域问题 出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策…

SpringBoot解决跨域问题

遇到前端跨域访问问题,类似于这样的: 在Springboot项目里加上这个配置文件CorsConfig.java,重启之后即可实现跨域访问,前端无需再配置跨域。 import org.springframework.context.annotation.Bean; import org.springframework…

搭建 PHP 开发环境(手把手图文教程)

都 2020 年了,你还在老老实实地按照下载Apache、安装MySQL、安装PHP、配置Apache 步骤来搭建PHP开发环境吗? 下面介绍一种一键配置方法:炒鸡好用的 phpStudy 下载安装 phpStudy 我们在这里可以看到,phpStudy 内置了apache、ngin…

搭建PHP环境

搭建PHP环境 对于初学者,推荐在 Windows 操作系统下使用 XAMPP 一键安装 PHP 集成开发环境(Apache、PHP、MySQL),XAMPP 提供 PHP 7 的安装版本,读者只需要到官方网站 https://www.apachefriends.org/download.html 下载即可。 根据自己需要下载相应的版本,下载后得到一个…

win下搭建php环境的方法

win下搭建php环境的方法 下载apache并配置;2、下载PHP并将其解压到wamp目录下的php文件夹;3、下载安装mysql;4、修改好配置文件即可。 本文操作环境:Windows7系统,PHP5.6版,Dell G3电脑。 window10下搭建p…

mac pro M1(ARM)安装:php开发环境

0. 引言 最近在处理各个语言的加密算法,正好需要安装php环境,特此记录,以供后续参考 1. 安装php 1、安装php包管理工具composer brew install composer2、安装php brew install php # 同时可以指定版本安装 brew install php8.0 # 查…

php mac 开发环境搭建_Mac搭建php的开发环境(图文详解)

搭建php的开发环境(图文详解) 这篇文章主要介绍了Mac下搭建php开发环境教程,Mac OS X内置了Apache 和 PHP,这样使用起来非常方便。本文以Mac OS X 10.6.3为例,需要的朋友可以参考下 Mac OS X;内置了Apache和;PHP,这样使用起来非常方便。本文以…

Linux搭建PHP开发环境

集百家之所长搭建的PHP环境 文章目录 集百家之所长搭建的PHP环境1安装SSH和Xftp2安装宝塔面板3安装Mysql4 安装ApachePHP 安装配置Apache至此环境搭建成功 1安装SSH和Xftp B站安装教程 2安装宝塔面板 可以这个安装教程 3安装Mysql 安装Mysql教程 指令如下 # 创建文件目录 …

win10下PHP开发环境搭建

win10下PHP开发环境搭建 安装Apache下载httpd-2.4.41-win64-VS16.zip解压修改配置文件安装服务运行 安装PHP下载解压 安装Mysql整合Apache、PHPApache配置修改PHP配置修改Mysql配置试验 IDEA支持PHP报错Apache启动“发生服务特定错误: 1.”Cannot load /PHP/php5apache2_4.dll …

PHP开发环境搭建与工具

PHP是跨平台的,所以我们可以在Mac OS,Windows,Linux等主流操作系统中进行开发,最为经典的也是最被认可的是Lamp/Lnmp结构,它们是(Linux apache/nginx MySQL PHP)的缩写,我们先简单的用非术语来介绍一下这几…

PHP开发环境搭建工具有哪些?

对于php开发小白来说搭建一个php运行环境就是一道坎! 因为要做php开发,搭建一个能够运行php网站的服务器环境是第一步,传统的php环境软件非常复杂,好在很多公司开发了一键搭建php安装环境,一键进行php环境配置&#x…

open与fopen

1.在将open与fopen之前,先讲文件描述符: 当一个可执行程序运行以后,就变成进程,操作系统会为每个进程分配一定的虚拟内存空间,32位操作系统就分配4G。虚拟内存空间结构如下图所示: 1G是内核空间使用&#…

open与fopen的区别

函数原型 FILE *fopen(const char *filename, const char *mode); 参数 filename-- 这是 C 字符串,包含了要打开的文件名称。 mode-- 这是 C 字符串,包含了文件访问模式。 功能 使用给定的模式mode打开filename所指向的文件。 1.层次不同 open是系统调用…

freopen()函数详解

freopen函数详解及在OJ评测系统中的使用 若要打开一个二进制文件,需要加上一个“b”字符。 重定向打开 freopen("in.txt", "r", stdin); freopen("out.txt", "w", stdout);重定向恢复 winfreopen("CON", &quo…

c语言关于freopen函数最全使用方法

hey,好久不见,最近沉迷游戏无法自拔,现在抽出时间来写写关于freopen函数的使用方法,这个freopen函数主要作用就是从文件读取函数同时写入文件,不像我们平常的控制台输入输出,也避免我们在刷一些题目时&…

C++文件操作之freopen

作为一个OIer,文件操作是很重要的。 如果没有文件操作或文件操作被注释,等待着你的就是爆零的命运。 C和C的文件操作,一般是用fopen或fstream,但在OI里,我们用freopen,即文件重定向。 它的用法其实也挺简单…

TVM中的auto-scheduling机制(Ansor)学习笔记

背景 TVM继承了Halide中算法(Algorithm)与调度(Schedule)分离的思想。用户使用TE(Tensor expression)这种DSL定义计算(算法),然后编译器优化相应的schedule,…

TVM的“hello world“基础流程 I

前言 继前图灵奖获得者Hennessy和Patterson在ISCA 2018提出“A New Golden Age for Computer Architecture”,编译器界大神Chris Lattner在ASPLOS 2021提出了“The Golden Age of Compiler Design”。另一方面,2020年图灵奖授予了编译器“龙书”作者Jef…

【TVM系列教程一】深度学习编译器及TVM 介绍

0x0. 介绍 大家好呀,在过去的半年到一年时间里,我分享了一些算法解读,算法优化,模型转换相关的一些文章。这篇文章是自己开启学习深度学习编译器的第一篇文章,后续也会努力更新这个系列。这篇文章是开篇,所…