跨域解决方案CROS最简单演示—

关于跨域访问的基本概念可以参考：
跨域访问的相关概念及解决方法

CORS ，Cross-Origin Resource Sharing，跨域资源共享。使用CORS可以实现使用AJAX访问跨域的资源。
CORS作为跨域访问的服务端解决方案，也是开发中最为常用的跨域访问方案。

演示示例

本篇的演示示例类同：
跨域解决方案之—JSONP

演示环境：
两个Tomcat

tomcat9-1　，　端口8080，项目app1
tomcat9-2，　端口9090,项目app2
演示目录如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZVBq2Xrb-1647049516137)(images/screenshot_1646921729959.png)]

app1项目中有文件 cors.html，内容如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>JSONP</title><script  type="text/javascript">function handleClick(){var url = "http://localhost:9090/app2/cors.jsp";var xhr = new XMLHttpRequest();xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {alert( xhr.responseText );}};xhr.open('get', url, true);xhr.send(); }   </script></head><body><button id="btn" onclick="handleClick()">CORS</button></body>
</html>

在该页面中，访问 9090的app2的cors.jsp页面，该页面的代码如下：

<%response.setHeader("Access-Control-Allow-Origin", "*"); out.print("([{ name:'Oscar999',age:'18'}]);");out.flush();
%>

cors.jsp 中设置跨域访问的是 response.setHeader("Access-Control-Allow-Origin", "*");，也就是所有域都可以跨域访问。跨域可以设置其他信息头，详细可以参考跨域访问的相关概念及解决方法。

演示环境和代码

完整的环境和代码可以到如下地址下载：
https://download.csdn.net/download/oscar999/84505043

使用说明：

下载后解压目录
进入 tomcat9-1\bin，点击startup.bat 启动8080端口的服务
进入 tomcat9-2\bin，点击startup.bat 启动9090端口的服务
禁止跨域访问演示：http://localhost:8080/app1/noaccess.html
JSONP实现跨域访问演示：http://localhost:8080/app1/jsonp.html
CORS实现跨域访问演示：　http://localhost:8080/app1/cors.html

跨域解决方案CROS最简单演示——JSP演示示例相关推荐

[乐意黎转载]Window.postMessage() HTML5 跨域解决方案
Hey,everybody~ 又是倒霉的跨域 T T , 有多少人死在了"说出你知道的跨域解决方案,越多越好?"这个面试问题上. 今天和大家说说,HTML5提供的一个跨域解决方案, ...
Atitit.js跨域解决方案attilax大总结后台java php c#.net的CORS支持
Atitit.js跨域解决方案attilax大总结后台java php c#.net的CORS支持 1.设置 document.domain为一致推荐1 2.Apache 反向代理推荐1 3. ...
html 跨域_常见跨域解决方案以及Ocelot 跨域配置
常见跨域解决方案以及Ocelot 跨域配置 Intro 我们在使用前后端分离的模式进行开发的时候,如果前端项目和api项目不是一个域名下往往会有跨域问题.今天来介绍一下我们在Ocelot网关配置的跨域 ...
WEB 前端跨域解决方案
跨域定义广义的定义:跨域是指一个域下的文档或脚本试图去请求另一个域下的资源. 1.) 资源跳转: 链接.重定向.表单提交 2.) 资源嵌入: <link>.<script>. ...
【安全系列之跨域】跨域解决方案
一.为什么会出现跨域问题出于浏览器的同源策略限制.同源策略是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS.CS ...
你可能不知道的跨域解决方案
出于浏览器的同源策略,我们经常会遇到浏览器跨域的问题. 简单的说跨域基本解决方案是: GET请求用JSONP 其他请求用同源iframe做代理 JSONP的介绍很多,这里就不多说了. 而同源ifram ...
js最全的十种跨域解决方案
在客户端编程语言中,如javascript和ActionScript,同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意义.同源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问 ...
常见跨域解决方案以及Ocelot 跨域配置
常见跨域解决方案以及Ocelot 跨域配置 Intro 我们在使用前后端分离的模式进行开发的时候,如果前端项目和api项目不是一个域名下往往会有跨域问题.今天来介绍一下我们在Ocelot网关配置的跨域 ...
WebAPI——浏览器跨域解决方案
一.跨域问题的由来同源策略:出于安全考虑,浏览器会限制脚本中发起的跨站请求,浏览器要求JavaScript或Cookie只能访问同域下的内容. 正是由于这个原因,我们不同项目之间的调用就会被浏览器阻 ...

跨域解决方案CROS最简单演示——JSP演示示例

演示示例

演示环境和代码

跨域解决方案CROS最简单演示——JSP演示示例相关推荐

最新文章

热门文章