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

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



相关文章
|
9天前
|
安全 JavaScript 前端开发
跨域问题如何解决
跨域问题是指浏览器同源策略限制了不同域名之间的资源访问。解决方法包括:1. CORS(跨域资源共享):服务器设置Access-Control-Allow-Origin响应头;2. JSONP:利用script标签不受同源策略限制的特点;3. 代理服务器:通过后端代理转发请求。
|
3月前
|
前端开发 JavaScript 应用服务中间件
说一说跨域和如何解决
说一说跨域和如何解决
|
3月前
|
前端开发 应用服务中间件 API
"揭秘!面试官必问:你是如何巧妙绕过跨域难题的?前端代理VS服务器端CORS,哪个才是你的秘密武器?"
【8月更文挑战第21天】在软件开发中,尤其前后端分离架构下,跨域资源共享(CORS)是常见的挑战。主要解决方案有两种:一是服务器端配置CORS策略,通过设置响应头控制跨域访问权限,无需改动前端代码,增强安全性;二是前端代理转发,如使用Nginx或Webpack DevServer在开发环境中转发请求绕过同源策略,简化开发流程但不适用于生产环境。生产环境下应采用服务器端CORS策略以确保安全稳定。
46 0
|
5月前
|
JSON 前端开发 安全
写了几年代码,你将跨域问题弄明白了吗?
互联网发展至今,前端开发者经常面临跨域问题,这是因为浏览器的同源策略限制了不同源的网页之间的数据交互。当尝试从`http://127.0.0.1:14949`访问`http://localhost:3000`的资源时,浏览器会阻止这种请求,因为它缺少“Access-Control-Allow-Origin”响应头,这是CORS(跨域资源共享)机制的要求。
|
6月前
|
JSON 前端开发 JavaScript
详细剖析让前端头疼的跨域问题是怎么产生的,又该如何解决
详细剖析让前端头疼的跨域问题是怎么产生的,又该如何解决
|
6月前
|
JavaScript 安全 前端开发
js开发:请解释什么是跨域请求(CORS),以及如何解决跨域问题。
CORS是一种W3C标准,用于解决浏览器同源策略导致的跨域数据访问限制。它通过服务器在HTTP响应头添加标志允许特定源进行跨域请求。简单请求无需预检,而预检请求(OPTIONS)用于询问服务器是否接受非简单请求。服务器端配置响应头如`Access-Control-Allow-Origin`等实现CORS策略,客户端JavaScript则正常发起请求。若配置不当,浏览器将阻止跨域访问,保障安全。
80 2
|
6月前
|
存储 安全 API
同源策略:概念、作用、跨域问题及解决办法
同源策略(Same Origin Policy,SOP)是一种重要的网络安全机制**,是由Netscape公司在1995年引入浏览器的一种安全功能,它要求网页在执行某些操作时,如使用XMLHttpRequest或Fetch API进行网络请求,或者尝试访问cookies、LocalStorage、IndexedDB等资源时,必须遵循“同源”原则。
|
6月前
|
前端开发 JavaScript 应用服务中间件
前端程序员必须要知道的跨域问题以及解决方法
前端程序员必须要知道的跨域问题以及解决方法
|
6月前
|
前端开发 安全 JavaScript
前端知识笔记(二)———跨域到底是什么意思?
前端知识笔记(二)———跨域到底是什么意思?
76 0
|
JSON 前端开发 安全
【实战晋级】理解跨域以及工作中跨域问题的处理 - 1
相信大部分前端工程师在日常工作中经常使用 xhr 或者 fetch 从后端 api 里取数据然后进行二次处理,随后渲染到页面。
155 0
【实战晋级】理解跨域以及工作中跨域问题的处理 - 1