java web项目使用CORS方法实现跨域请求方案

Java领域Spring Boot的跨域请求处理方案 在现代Web开发中,前后端分离的架构越来越流行。前端应用和后端服务可能部署在不同的域名或端口上,这就会引发跨域请求的问题。本文章的目的在于深入探讨Spring Boot中处理跨域请求的各种方案,帮助开发者理解跨域请求的本质,并掌握在Spring Boot项目中实现跨域请求处理的方法。文章的范围涵盖了跨域请求的基本概念、核心原理、具体实现步骤、实际应用场景以及相关的工具和资源推荐。本文首先介绍跨域请求的背景知识,包括其定义、产生原因和安全问题。接着阐述核心概念CORS的原理和架构,并给出相应的示意图和流程图。 阅读详情

问题产生背景

需要实现这样一个需求,在当前站点中使用ajax发送一个请求到另一个站点获取数据。js中使用jquery的ajax如下:

1
2
3
4
5
6
7
8
9
10
11
$.ajax({
     url:http://219.151.48.39:8085/kanms_appServer/operationer/login,
     data:{
     	"username": "test",
		"password": "test" 
     },
     type:'post',
     dataType:'json',
     success:function(data){
     	console.info(data);          	 
     });

结果在页面上出现以下错误提示:

1
2
3
XMLHttpRequest cannot load http://219.151.48.39:8085/kanms_appServer/operationer/login. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'null' is therefore not allowed access.

问题分析

网上查询得知原来是因为跨域的问题,javascript出于安全方面的考虑,不允许跨域调用其他页面的对象。

什么是跨域?
简单的理解就是因为javascript同源策略的限制,a.com域名下的js无法操作b.com或者c.a.com域名下的对象。更详细的说明可以看下表:

URL 说明 是否允许通信
http://www.a.com/a.js 
http://www.a.com/b.js
同一域名下 允许
http://www.a.com/lab/a.js 
http://www.a.com/script/b.js
同一域名下不同文件夹 允许
http://www.a.com:8000/a.js 
http://www.a.com/b.js
同一域名不同端口 不允许
http://www.a.com/a.js 
https://www.a.com/b.js
同一域名不同协议 不允许
http://www.a.com/a.js 
http://70.32.92.74/b.js
域名和域名对应ip 不允许
http://www.a.com/a.js 
http://script.a.com/b.js
主域相同,子域不同 不允许
http://www.a.com/a.js 
http://a.com/b.js
同一域名,不同二级域名(同上) 不允许(cookie这种情况下也允许访问)
http://www.cnblogs.com/a.js 
http://www.a.com/b.js
不同域名 不允许

经分析得知js中XMLHttpRequest对象不能加载跨域上的资源

解决办法

那么,怎样才能解决跨域访问资源的问题呢,主要有JSONP、flash、iframe、xhr2。这里介绍使用CORS(跨域资源共享,Cross-Origin Resource Sharing)的方法。

CORS原理:
CORS定义一种跨域访问的机制,可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单,只需由服务器发送一个响应标头即可。

做法为:设置HTTP响应头Access-Control-Allow-Origin,指定服务器端允许进行跨域资源访问的来源域。可以用通配符*表示允许任何域的JavaScript访问资源,但是在响应一个携带身份信息(Credential)的HTTP请求时,Access-Control-Allow-Origin必需指定具体的域,不能用通配符。

这里使用Filter的方式给服务端的所有请求都加上Access-Control-Allow-Origin响应头,代码如下:

SimpleCORSFilter类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
package com.ustcinfo.kanms.support;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;

public class SimpleCORSFilter implements Filter {

	@Override
	public void init(FilterConfig filterConfig) throws ServletException {

	}

	@Override
	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
			throws IOException, ServletException {
		HttpServletResponse res = (HttpServletResponse)response;
		res.setHeader("Access-Control-Allow-Origin", "*");
		res.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
		res.setHeader("Access-Control-Max-Age", "3600");
		res.setHeader("Access-Control-Allow-Headers", "x-requested-with");
		chain.doFilter(request, response);
	}

	@Override
	public void destroy() {

	}

}

web.xml中添加过滤器的配置

1
2
3
4
5
6
7
8
9
<!-- cors解决跨域访问问题 -->
<filter>
	<filter-name>cors</filter-name>
	<filter-class>com.ustcinfo.kanms.support.SimpleCORSFilter</filter-class>
</filter>
<filter-mapping>
	<filter-name>cors</filter-name>
	<url-pattern>/*</url-pattern>
</filter-mapping>

加上以上代码后,使用原来的ajax访问跨域服务端信息的Response Header如下:

1
2
3
4
5
6
7
Access-Control-Allow-Headers:x-requested-with
Access-Control-Allow-Methods:POST, GET, OPTIONS, DELETE
Access-Control-Allow-Origin:*
Access-Control-Max-Age:3600
Content-Type:application/json;charset=UTF-8
Server:Jetty(8.1.10.v20130312)
Transfer-Encoding:chunked

并且可以通过ajax访问跨域服务器的资源了,大功告成。


java后端cors跨域处理 需要做跨域处理的情景: 很多情况下同一个项目中前端的同学需要访问到许多不同域名的服务。在这些后端的服务当中就需要做跨域处理。 接下来重点来了,后端是怎么做跨域处理的。 上代码: import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Conf... 阅读详情

相关推荐

GeoServer解决jetty和tomcat服务访问跨域的问题

解决Geoserver在windows环境使用geoserver安装程序 和 windows或linux环境tomcat war包安装后的服务访问跨域问题。

java web项目前后端分离的跨域问题CORS

目录 1:前后端分离: 2:前后端分离的好处: 3:跨域问题存在的原因: 4:跨域问题的解决方案CORS: 4.1、在web.xml中配置 4.2、通过WebMvcConfigurer### 4.3 自定义Filter 1:前后端分离: 前后端分离并不只是开发模式,而是web应用的一种架构模式。在开发阶段,前后端工程师约定好数据交互接口,实现并行开发和测试;在运行阶段前后...

LiZhen314的博客 808

Cors实现java后端完全跨域实例

本篇文章主要介绍了Cors实现java后端完全跨域实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

Jetty Server设置允许跨域的方法

【代码】Jetty Server设置允许跨域的方法。

三劫散仙 1144

使用CORS实现JavaWeb跨域请求问题的方法

主要介绍了使用Cors实现JavaWeb跨域请求问题的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下

AD21导出gerber文件

文件–>制造输出–>Gerber Files 文件–>制造输出–>Gerber Files 通用、光圈和高级跟第一步一样 3.文件–>制造输出–>NC Drill Files 这个默认就可以了 主要参考视频来自bilibili添加链接描述 此篇博客主要是写给自己好记的,无其他商业用途 ...

新手小杨 1万+

配置maven jetty 插件允许跨域访问

添加依赖jar,版本由使用jetty版本决定 org.eclipse.jetty jetty-servlets 9.3.0.M2 在web.xml中配置 cross-origin org.eclipse.jetty.servlets.CrossOriginFilter allowedOrigins * allowedMethods

pan-zy的专栏 5874

IAR使用教程:如何导入现有工程并成功编译

详细介绍如何在IAR中导入现有工程项目并完成编译配置,解决常见报错问题。通过清晰的操作指引,帮助开发者快速上手iar使用教程中的关键环节,提升开发效率。

weixin_42437253的博客 883

jietty跨域请求

import VueResource from 'vue-resource' Vue.use(VueResource) send:function(){                 var postData={     OutChannelId : "SMS"     };                 this.$http.post(r

好好学习,天天向上 431

081、空间降噪(Spatial Denoise)实战:双边滤波、非局部均值与BM3D在ISP中的调优

调参时,别只看PSNR/SSIM。找几个典型场景(夜景、人像、文字、天空),在真实设备上肉眼对比。我见过PSNR涨了2dB但图像看起来更差的案例——因为PSNR不惩罚纹理丢失。空间降噪这块,理论说再多,不如动手调一次。下次遇到噪点问题,先别急着上BM3D,试试双边滤波的自适应参数,说不定有惊喜。

zzfmlxs的博客 43

运动想象 (MI) 分类学习系列 (19) : EEG-TransNet

本文提出了一种基于注意力机制的卷积神经网络(EEG-TransNet),用于运动想象脑电图(MI-EEG)解码。该方法创新性地通过平均池化和方差池化提取多模态时间信息,并结合自注意力模块捕获长期依赖关系。消融实验表明,方差池化比最大池化更有效(p<0.05),且注意力模块和卷积编码器对特征判别性至关重要。可视化分析验证了该方法能学习到更具判别性的紧凑特征。该工作为MI-EEG解码提供了新的多尺度时间信息融合视角,代码已开源。

走在深度学习前沿的小宋 358

Jetty Cross Origin Filter解决jQuery Ajax跨域访问的方法

当使用jQuery Ajax post请求时可能会遇到类似这样的错误提示 XMLHttpRequest cannot load http://xxxxxx. Origin http://xxxxxx is not allowed by Access-Control-Allow-Origin. 这是Ajax跨域访问权限的问题,服务器端不接受来自另一个不同IP地址的由脚本文件发出的http请求。解...

weixin_30652897的博客 658

MATLAB使用贝叶斯网络bnt工具箱:使用手册详解

MATLAB使用贝叶斯bnt网络工具箱:使用手册详解

WW、forever的博客 2676

Web跨域请求及其解决方案

目录 一、理论概述 1. 什么是跨域请求(Cross-domain Request) 2. 浏览器的同源策略(Same-origin Policy) 3. 存在的安全风险 4. CSRF攻击简介 二、跨域方案 1.跨域资源共享(CORS) (1)CORS简单请求 (2)CORS非简单请求(也称预检请求) HTTP 响应首部字段 Access-Control-Allow-Or...

ppxin的专栏 4万+

微店构造订单页面,自动化抢票

之前的文章写过微店抢票如何构造订单页面分析,这篇文章在之前的基础上,进行抢票。

猫敷雪 7201

Altium Designer(AD24/25)导出DXF或DWG结构文件的方法

DXF(Drawing Exchange Format)和DWG(Drawing)是两种常见的CAD(计算机辅助设计)文件格式,常用于结构和硬件之间的沟通。本文介绍Altium Designer(AD24/25)导出DXF或DWG结构文件的方法。

fydar的博客 2318

Springboot处理CORS跨域请求的三种方法

前言 Springboot跨域问题,是当前主流web开发人员都绕不开的难题。但我们首先要明确以下几点 跨域只存在于浏览器端,不存在于安卓/ios/Node.js/python/ java等其它环境 跨域请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了。 之所以会跨域,是因为受到了同源策略的限制,同源策略要求源相同才能正常进行通信,即协议、域名、端口号都完全一致。 浏览器出于安全的考虑,使用 XMLHttpRequest对象发起 HTTP请求时必须遵守同源策略,否则就是跨域的.

陈哈哈的菜园子 7万+

c#视觉应用开发中如何使用Emgu CV在C#中进行图像处理?

Emgu CV 是 OpenCV 的 .NET 包装器,可以让开发者在 .NET 语言(如 C#)中使用 OpenCV 的功能进行图像处理。在进行图像处理时,Emgu CV 提供了丰富的 API 可以使用。PictureBoxImageBox下面是一个详细的示例,演示如何使用 Emgu CV 在 C# 中进行基本的图像处理,包括加载图像、转换为灰度图像、进行边缘检测,然后显示结果。byte在这个示例中,我们使用了三个PictureBox控件来显示原始图像、灰度图像和边缘检测后的图像。

zhangzhechun的专栏 667

java web项目使用cors实现跨域post登录请求

因项目需要,今天研究了下cors跨域post请求登录操作,参考了官方及网上案例,实现过程如下:1、环境:java web(ssm)项目+tomcat7/8。2、服务端配置:下载并载入cors-filter-2.2.1.jar包(路径:项目lib文件夹中),在web.xml中加入cors过滤器:&lt;filter&gt; &lt;filter-name&gt;CorsFilter&lt;/fil...

改变自己 2972

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

渗透CORS跨域漏洞修复方案

线上系统在等保测评的时候被扫出来了CORS跨域问题,但是根据网上大多数人用的方法之后,发现,还是能被扫出来问题,被这个问题困扰了很久,才找到了问题的解决方案,亲测有效!!!

qq_52231508的博客 4606

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

Spring Boot处理CORS跨域请求的三种方法

Spring Boot处理CORS跨域请求的三种方法

吴名氏的博客 11万+

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的,已经排好版了,而且还是完整的,适合小白

Spring Boot 使用 CORS 解决跨域请求问题

对于前后端分离的项目来说,如果前端项目与后端项目部署在两个不同的域下,那么势必会引起跨域问题的出现。 那什么是跨域呢? 跨域指的是从一个域名去请求另外一个域名的资源。即跨域名请求,跨域时,浏览器不能执行其他域名网站的脚本,是由浏览器的 “同源策略” 造成的,是浏览器施加的安全限制。跨域的严格一点来说就是只要协议,域名,端口有任何一个的不同,就被当作是跨域。 下面举个例子: 判断下面 URL 是否和 http://www.baidu.com/a/a.html 同源 http://www.baidu.com/

养歌的博客 2731

CORS就是跨域吗?

同源策略(Same-Origin Policy)是浏览器中的一项安全机制,用于保护用户的隐私和安全。它限制了一个网页或者脚本只能从同一个源加载的资源进行访问,而不能访问其他来源的资源。这样做可以防止恶意网站利用用户身份信息进行跨站请求伪造(CSRF)攻击,保护用户的数据安全。跨站请求伪造(CSRF,Cross-Site Request Forgery)是一种网络攻击方式。在 CSRF 攻击中,攻击者利用已认证的用户身份(例如用户在银行网站上登录后的会话信息)来伪造请求,以执行未经授权的操作。

Bin哥厉害的博客 1491

什么是跨域请求以及实现跨域的方案

前言:对于跨域请求,很早之前就有去了解过,但因为一直关注的都是服务器后端开发,故也就仅仅停留在概念的理解上而没有机会在实际开发场景中接触得到。最近在公司的开发任务中,需要接触到 Ajax 跨域请求,由于之前没有遇到过类似的问题,在开发过程中遇到不少困难,也查阅了不少资料和博客。在这过程中收获了不少,故特意写下以下文章总结,如果文章有什么不足之处,还望各位指出。 什么是跨域请求 概述 ​ 在 HTML 中,<a>, <form>, <img>, <script.

weixin_41276238的博客 2242
上一篇: Angular的核心
appppppen
博客等级 码龄11年 13粉丝 7原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值