难缠的跨域问题,终于弄清楚了(上)

简介: 哈喽,大家好,我是指北君。这次指北君给大家分享如何解决跨域问题。如何解决跨域问题?首先我们需要知道什么是跨域,跨域指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器对JavaScript 施加的安全限制。

1、同源策略

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

所谓同源指的是:

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

60.jpg

浏览器在执行脚本的时候,都会检查这个脚本属于哪个页面,即检查是否同源,只有同源的脚本才会被执行;而非同源的脚本在请求数据的时候,浏览器会报一个异常,提示拒绝访问。

①、http://www.123.com/index.html 调用  http://www.123.com/welcome.jsp      协议、域名、端口号都相同,同源。

②、https://www.123.com/index.html 调用 http://www.123.com/welcome.jsp      协议不同,非同源。

③、http://www.123.com:8080/index.html 调用 http://www.123.com:8081/welcome.jsp   端口不同,非同源。

④、http://www.123.com/index.html 调用  http://www.456.com/welcome.jsp       域名不同,非同源。

⑤、http://localhost:8080/index.html 调用 http://127.0.0.1:8080/welcom.jsp        虽然localhost等同于 127.0.0.1 但是也是非同源的。

同源策略限制的情况:

1、Cookie、LocalStorage 和 IndexDB 无法读取

2、DOM 和 Js对象无法获得

3、AJAX 请求不能发送

注意:对于像 img、iframe、script 等标签的 src 属性是特例,它们是可以访问非同源网站的资源的。


2、跨域实例演示


61.jpg

我们创建了两个 web 项目JavaWeb01 和 JavaWeb02 分别部署在tomcat1和Tomcat2上,这两个 Tomcat 的端口号设置是不一样的,一个是 8080,一个是8081,所以这两个项目构成了非同源。那么我们从客户端(浏览器)输入访问部署在 Tomcat2 上的项目 JavaWeb2,然后在该项目中通过 ajax 去请求部署在 Tomcat1 上的项目数据,能够访问的到呢?

①、在 JavaWeb02 项目中,有一个 jsp 文件,我们通过在浏览器访问该 JSP 文件去获取 JavaWeb01 项目中的数据

62.png


通过ajax 访问

url:"http://localhost:8080/JavaWeb01/getPassWordByUserNameServlet?userName=Tom"

去获取 JavaWeb01 项目中的数据。

②、在 JavaWeb01 项目中,创建一个 getPassWordByUserNameServlet 请求的 Servlet63.png


③、在浏览器中输入 http://localhost:8081/JavaWeb02/index.jsp 链接,去调用该页面的 ajax 函数

64.jpg

浏览器给我们返回了一个错误,这就是浏览器同源策略导致的跨域访问会报错。那么该如何解决呢?

3、跨域解决办法

①、response 添加 header   我们在 Servlet 请求返回时添加如下代码:

66.png

请求结果如下:


67.jpg



目录
打赏
0
0
0
0
4
分享
相关文章
一文搞懂云原生架构
目前,每个 IT 资源或产品都作为服务提供。而且伴随云计算的滚滚浪潮,云原生(CloudNative)的概念应运而生,云原生很火,火得一塌糊涂,都0202年了,如果还不懂云原生,那真的out了。因此,云原生软件开发成为每个企业的关键要求,无论其规模和性质如何。在加入云计算潮流之前,了解什么是云原生架构以及如何为云原生应用程序需求设计正确的架构非常重要。
一文搞懂云原生架构
智能语音助手的技术原理与实现
【7月更文挑战第31天】智能语音助手的技术原理与实现涉及语音识别、自然语言处理、知识图谱以及多模态交互等多个方面。随着人工智能技术的不断发展和创新,智能语音助手将更加智能化、高效化和普适化,为我们的生活带来更加便捷和丰富的体验。
1248 0
【Web 前端】css3的新特性有哪些?
【4月更文挑战第22天】【Web 前端】css3的新特性有哪些?
计算机网络——第一章时延部分深入学习、相关习题及详细解析
计算机网络——第一章时延部分深入学习、相关习题及详细解析
417 0
线程的魔法:揭开现代操作系统并发执行的面纱
线程的魔法:揭开现代操作系统并发执行的面纱
95 0
2024新版阿里云服务器收费价格表汇总:一键查看阿里云服务器最新报价!
今天,我们就来详细解析一下阿里云新版云服务器的收费价格,帮助大家更好地选择适合自己的云服务器。2024年阿里云服务器租用费用价格表更新,云服务器ECS经济型e实例2核2G、3M固定带宽99元一年、ECS u1实例2核4G、5M固定带宽、80G ESSD Entry盘优惠价格199元一年,轻量应用服务器2核2G3M带宽轻量服务器一年61元、2核4G4M带宽轻量服务器一年165元12个月、2核4G服务器30元3个月,幻兽帕鲁4核16G和8核32G服务器配置,云服务器ECS可以选择经济型e实例、通用算力u1实例、ECS计算型c7、通用型g7、c8i、g8i等企业级实例规格。今天分享阿里云服务器租用费
5384 1
kde
|
7天前
|
Docker镜像加速指南:手把手教你配置国内镜像源
配置国内镜像源可大幅提升 Docker 拉取速度,解决访问 Docker Hub 缓慢问题。本文详解 Linux、Docker Desktop 配置方法,并提供测速对比与常见问题解答,附最新可用镜像源列表,助力高效开发部署。
kde
4357 10
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问