什么是跨域?怎么解决跨域问题

article/2025/10/3 16:25:40

文章目录

    • 一、同源策略
    • 二、同源策略案例
    • 三、什么是跨域
    • 四、跨域解决方法
      • 1.ajax的jsonp
        • 概念
        • 核心用法
      • 2.CORS方式
      • 3.nginx 转发

一、同源策略

同源策略,是由 Netscape 提出的一个安全策略,它是浏览器最核心也是最基本的安全功能,如果缺少同源策略,则浏览器的正常功能可能都会受到影响,现在所有支持JavaScript的浏览器都会使用这个策略。

规定:浏览器要求,在解析Ajax请求时,要求浏览器的路径与Ajax的请求的路径必须满足三个要求,则满足同源策略,可以访问服务器。

要求:

协议、域名、端口号都相同,只要有一个不相同,那么都是非同源

在这里插入图片描述

要求:
1.浏览器的请求路径
2.Ajax请求的网址

二、同源策略案例

案例1:
1.浏览器地址 http://localhost:8090/findAll
2.Ajax请求地址 http://localhost:8090/aaaa
满足同源策略.服务器可以正常访问.

案例2:
1.浏览器地址 http://localhost:8091/findAll
2.Ajax请求地址 http://localhost:8090/aaaa
不满足同源策略. 端口号不同. 属于跨域请求.

案例3:
1.浏览器地址 http://localhost:8090/findAll
2.Ajax请求地址 https://localhost:8090/aaaa
不满足同源策略. 协议不同. 属于跨域请求.

案例4:
前提: IP与域名映射
1.浏览器地址 http://www.baidu.com/findAll
2.Ajax请求地址 http://163.177.151.109/aaaa
不满足同源策略. 域名不同.

案例5:
1.浏览器地址 http://10.0.1.1:80/findAll
2.Ajax请求地址 http://10.0.1.1/aaaa
满足同源策略. http协议,默认端口为80

案例6:
1.浏览器地址 https://10.0.1.1/findAll
2.Ajax请求地址 https://10.0.1.1:443/aaaa
满足同源策略,https协议默认端口为443

三、什么是跨域

CORS全称Cross-Origin Resource Sharing,意为跨域资源共享。当一个资源去访问另一个不同域名或者同域名不同端口的资源时,就会发出跨域请求。如果此时另一个资源不允许其进行跨域资源访问,那么访问就会遇到跨域问题。

跨域指的是浏览器不能执行其它网站的脚本。是由浏览器的同源策略造成的,是浏览器对JavaScript 施加的安全限制。

四、跨域解决方法

1.ajax的jsonp

概念

JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。 由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。

核心用法

利用<script src="远程服务网址></script>

返回值语法固定的:callback(JSON数据)

2.CORS方式

说明:CORS(Cross-origin resource sharing) “跨域资源共享”,现在的主流的浏览器都支持cors的方式.。如果需要跨域,则需要配置响应头信息,标识是否允许。

服务器端标识:
在这里插入图片描述
检查响应头信息

在这里插入图片描述

CORS调用原理图

在这里插入图片描述

3.nginx 转发

利用nginx反向代理,将请求分发到部署相应项目的tomcat服务器,当然也不存在跨域问题


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

相关文章

什么是跨域以及为什么会出现跨域以及跨域的解决方案

1.什么是跨域&#xff1f; 跨域&#xff1a;指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的&#xff0c;是浏览器对javascript施加的安全限制。 • 同源策略&#xff1a;是指协议&#xff0c;域名&#xff0c;端口都要相同&#xff0c;其中有一个不同都会产…

什么是跨域?如何解决?

一、什么是跨域&#xff1f; 跨域&#xff1a;指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的&#xff0c;是浏览器对javascript施加的安全限制。 例如&#xff1a;a页面想获取b页面资源&#xff0c;如果a、b页面的协议、域名、端口、子域名不同&#xf…

什么是跨域? 出现原因及解决方法

目录 一、什么是跨域二、为什么有跨域问题&#xff1f;三、解决跨域问题的方案1.Jsonp2.nginx3.CORS3.1 什么是cors3.2 原理 四、GateWay网关中实现跨域步骤 一、什么是跨域 跨域&#xff1a;浏览器对于javascript的同源策略的限制 。 同源政策的目的&#xff0c;是为了保证用…

什么是跨域及解决跨域都有哪些方法?

一.同源策略 浏览器为了隔离潜在的恶意文件&#xff0c;使用同源策略&#xff0c;限制从一个源加载的文档或脚本和另一个源的资源进行交互&#xff08;不同源之间的文档&#xff0c;资源的交互&#xff09;; 通俗的理解&#xff1a;浏览器规定&#xff0c;A 网站的 JavaScript…

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

1.什么是跨域 跨域是指浏览器不能执行其他网站的脚本。它是浏览器同源策略造成的&#xff0c;是浏览器对JS实施的安全限制。 2.常见的跨域场景 3.什么是同源策略&#xff1f; &#xff08;所谓同源是指&#xff1a;“域名”、“协议”、“端口”均为相同&#xff09; 同源策略/…

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

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

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

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

SpringBoot解决跨域问题

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

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

都 2020 年了&#xff0c;你还在老老实实地按照下载Apache、安装MySQL、安装PHP、配置Apache 步骤来搭建PHP开发环境吗&#xff1f; 下面介绍一种一键配置方法&#xff1a;炒鸡好用的 phpStudy 下载安装 phpStudy 我们在这里可以看到&#xff0c;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并配置&#xff1b;2、下载PHP并将其解压到wamp目录下的php文件夹&#xff1b;3、下载安装mysql&#xff1b;4、修改好配置文件即可。 本文操作环境&#xff1a;Windows7系统&#xff0c;PHP5.6版&#xff0c;Dell G3电脑。 window10下搭建p…

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

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

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

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

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

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

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

open与fopen

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

open与fopen的区别

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

freopen()函数详解

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