资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

java代码跨域cors,javascript跨域

JAVA跨域问题

跨域问题一般都在后台程序解决,将自己的程序通过配置文件或者代码将其允许跨域,

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名与空间、网站空间、营销软件、网站建设、马山网站维护、网站推广。

在有跨域安全的时候,所有前端post请求时,会发送一个与其请求名字一样的OPTIONS

此请求没有任何参数,此机制为post不知道是否有权限请求接口,发送了一个探知请求,探知

请求确认后,允许访问后调用正常Post接口。 不允许就会出现你现在的问题跨域异常。

萌新,java是开源的,比NET好多了,多看看底层

SpringBoot进阶之处理跨域问题(CORS)

大家好,一直以来我都本着 用最通俗的话理解核心的知识点, 我认为所有的难点都离不开 「基础知识」 的铺垫

「大佬可以绕过 ~」

如果你是一路看过来的,很高兴你能够耐心看完。之前带大家学了 Springboot 基础部分,对基本的使用有了初步的认识, 接下来的几期内容将会带大家进阶使用,会先讲解基础 中间件 的使用和一些场景的应用,或许这些技术你听说过,没看过也没关系,我会带大家一步一步的入门,耐心看完你一定会有 收获 ~

上期带大家学习了 Springboot 中如何集成 MyBatis分页插件PageHelper 以及它的一个基本使用, 本期将带大家学习 SpringBoot 中如何处理跨域问题的,同样的,我们集成到 Springboot 中。最近github可能会被墙,所以我把源码放到了国内gitee上,本节我们依然使用上期的代码

同样的,为了照顾小白同学,依然先说一下啥是跨域。说到跨域问题,如果你是 前端 同学,肯定不会陌生, 你有可能调接口调着调着,发现请求发布出去,控制台会报 CORS 错误, 这时候你会找后台老大哥给你处理一下。然而现在前端工程中,一般都会有 proxy代理 ,这样也能解决问题,这只是本地调试,但上线还会有问题, 除非你发布的时候你们是同一个 域 下。

好,说了这么多,大概明白跨域是如何产生了,就是说前端调用的后端接口不属于同一个 域(域名或端口不同) ,就会产生跨域问题,也就是说你的应用访问了该应用域名或端口之外的域名或端口,这里给大家总结一下,产生跨域的三个条件:

解决思路大致可以分为以下几方面:

从源头浏览器解决,解除跨域机制,用户自己设置浏览器,这不大现实,好, pass

发送 JSONP 请求替代XHR请求,并不能适用所有的请求方式, 不推荐

之前我们提到前端本地工程开启 Proxy ,那么服务端可不可进行代理呢?答案是可以的,怎么做?可以通过 nginx 进行代理,给大家简单演示一下:

nginx 是当今比较火的 web 服务器,常用于服务代理, 等教大家部署的时候会讲一下

这也是本节要讲的内容,我们先不直接的给大家展示代码,先说一下它的原理。

一般我们下载的浏览器比如 Chrome ,它都是自行默认开启 跨域限制 的,那我们如何判断我们发出去的请求是一个 跨域请求 呢,打开浏览器开发者工具,在请求的请求头中就可以发现,如果不是一个跨域请求,它只有 Host ,如果是一个 跨域请求 它会多一个 Origin ,告诉浏览器我俩请求的地方不一样

跨源资源共享(CORS) 是一种基于 HTTP头 的机制,该机制通过允许服务器标示除了它自己以外的其它 origin(域,协议和端口 ),这样浏览器就可以访问加载这些资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求,该机制通过浏览器发起一个到服务器托管的跨源资源的 预检(OPTION) 请求。在预检中,浏览器发送的头中标示有HTTP方法和真实请求中会用到的头,那么具体是怎么设置 头 的呢?

服务端通过设置如上,就可以进行跨域访问了。好,有了基本的理论之后,我们一起看一下在 Springboot 中如何解决的:

是不是很简单~ 它的实现机制主要是通过请求 拦截器 实现的,你慢慢会发现,随着学习的深入,你会遇到各种 拦截器 技术

本期到这里就结束了,总结一下,本节主要带大家认识了什么是 跨域 ,以及解决思路,最后教大家 Sprinboot 中是如何配置跨域访问的,源码已更新,大家可以自行试一下

java为什么会有跨域问题

前言

相信大家在写前端脚本的时候经常会遇到发送数据到后台的情况,但是由于浏览器的限制,不同域名之间的数据是不能互相访问的,那前端怎么和后端如何进行数据之间的交换呢?

JavaScript由于安全性方面的考虑,不允许页面跨域调用其他页面的对象,那么问题来了,什么是跨域问题?

答:这是由于浏览器同源策略的限制,现在所有支持JavaScript的浏览器都使用了这个策略。那么什么是同源呢?所谓的同源是指三个方面“相同”:

域名相同

协议相同

端口相同

下面就举几个例子来帮助更好的理解同源策略。

URL

说明

是否允许通信

同一域名    允许  

不同域名    不允许  

同一域名不同端口    不允许  

同一域名不同协议    不允许  

在JAVA中处理跨域问题,通常有以下两种常用的解决方法。

第一种解决方法

后台代码在被请求的Servlet中添加Header设置:

response.setHeader("Access-Control-Allow-Origin", "*");

PrintWriter out =null;

try

{

out = response.getWriter();

} catch (IOException e)

{

// TODO Auto-generated catch block

e.printStackTrace();

}

out.print("{'status':'ok'}");

out.flush();

out.close();

Access-Control-Allow-Origin这个Header在W3C标准里用来检查该跨域请求是否可以被通过,如果值为*则表明当前页面可以跨域访问。默认的情况下是不允许的。

在前端JS中需要向Servlet发出请求,请求代码如下所示:

$.ajax({

url: "your url",

type:"get or post",

dataType:"json",

data:{

....

},

success:function(data){

...

}

第二种解决方法

通过jsonp跨域请求的方式。JSONP和JSON虽然只有一个字母的区别,但是他们完全就是两回事,很多人很容易把他们搞混。JSON是一种数据交换的格式,而JSONP则是一种非官方跨域数据交互协议。

首先来说一下前端JS是怎么发送请求。代码如下所示:

$.ajax({

url:"your url",

type:"get or post",

async:false,

dataType : "jsonp",

//服务端用于接收callback调用的function名的参数

jsonp:"callbackparam",

//callback的function名称

jsonpCallback:"success_jsonpCallback",

success:function(data){

console.log(data);

},

error:function(data){

console.log(data);

}

});

这里的callbackparam和success_jsonpCallback可以理解为发送的data数据的键值对,可以自定义,但是callbackparam需要和后台约定好参数名称,因为后台需要获取到这个参数里面的值(即success_jsonpCallback)。

下面,最重要的来了,后台怎么样获取和返回数据呢。代码如下所示:

PrintWriter out =null;

String callback=req.getParameter("callbackparam");

String json=callback+"({'status':'ok'})";

try

{

out = resp.getWriter();

} catch (IOException e)

{

// TODO Auto-generated catch block

e.printStackTrace();

}

out.print(json);

out.flush();

out.close();

首先需要获取参数名为callbackparam的值,这里获取到的值就是“success_jsonpCallback”。然后将这个值加上一对小括号。小括号里放入你需要返回的数据内容,比如这里我返回一个JSON对象。当然你也可以返回其他对象,比如只返回一个字符串类型数据也可以。最后前端JS返回的数据就是这样的:

success_jsonpCallback({'status':'ok'})

浏览器会自动解析为json对象,这时候你只需要在success回调函数中直接用data.status就可以了。

如何用CORS来解决JS中跨域的问题

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

2、tomcat如何配置cors的跨域请求: 

在tomcat中,有一个和cors相关的拦截器:CORS Filter

该过滤器可以通过添加必需的访问控制请求头Access-Control-*对象来进行跨域。同时还可以对一些请求进行拦截。如果请求是无效的,或者是不被允许的,该请求被拒绝或者禁止。 

其在web.xml文件中的基本配置如下:

filter

filter-nameCorsFilter/filter-name

filter-classorg.apache.catalina.filters.CorsFilter/filter-class

init-param

param-namecors.allowed.origins/param-name

param-value

,

/param-value

/init-param

init-param

param-namecors.allowed.methods/param-name

param-value

GET,POST,HEAD,OPTIONS,PUT

/param-value

/init-param

init-param

param-namecors.allowed.headers/param-name

param-value

Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Access-Control-Allow-Origin

/param-value

/init-param

init-param

param-namecors.exposed.headers/param-name

param-value

Access-Control-Allow-Origin,Access-Control-Allow-Credentials

/param-value

/init-param

init-param

param-namecors.support.credentials/param-name

param-valuetrue/param-value

/init-param

init-param

param-namecors.preflight.maxage/param-name

param-value10/param-value

/init-param

/filter

filter-mapping

filter-nameCorsFilter/filter-name

url-pattern/wxrefund/*/url-pattern

/filter-mapping

3、cors.allowed.origins:允许访问资源的源列表。*表示任何来源都可以访问该资源。否则,只有配置的白名单的来源可以访问该资源,其中白名单用逗号隔开,如。

4、cors.allowed.methods:允许访问的http请求方法,如GET,POST,HEAD,OPTIONS,PUT等,方法名用逗号隔开。

5、cors.allowed.headers:在实际请求时可使用的请求头列表,用逗号隔开。如Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Access-Control-Allow-Origin。这些头也将返回作为访问控制的一部分。

使用CORS解决跨域问题

跨域是指跨域名的访问,以下情况都属于跨域:

如果 域名和端口都相同,但是请求路径不同 ,不属于跨域,如:

跨域不一定会有跨域问题。

因为跨域问题是浏览器对于ajax请求的一种安全限制: 一个页面发起的ajax请求,只能是于当前页同域名的路径 ,这能有效的阻止跨站攻击。

因此: 跨域问题 是针对ajax的一种限制 。

但是这却给我们的开发带来了不变,而且在实际生成环境中,肯定会有很多台服务器之间交互,地址和端口都可能不同,怎么办?

目前比较常用的跨域解决方案有3种:

我们这里会采用cors的跨域方案。

CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。

它允许浏览器向跨源服务器,发出 XMLHttpRequest 请求,从而克服了AJAX只能 同源 使用的限制。

CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。

浏览器会将ajax请求分为两类,其处理方案略有差异:简单请求、特殊请求。

只要同时满足以下两大条件,就属于简单请求。:

(1) 请求方法是以下三种方法之一:

(2)HTTP的头信息不超出以下几种字段:

当浏览器发现发现的ajax请求是简单请求时,会在请求头中携带一个字段: Origin .

Origin中会指出当前请求属于哪个域(协议+域名+端口)。服务会根据这个值决定是否允许其跨域。

如果服务器允许跨域,需要在返回的响应头中携带下面信息:

注意:

如果跨域请求要想操作cookie,需要满足3个条件:

不符合简单请求的条件,会被浏览器判定为特殊请求,,例如请求方式为PUT。

特殊请求会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。

浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的 XMLHttpRequest 请求,否则就报错。

一个“预检”请求的样板:

与简单请求相比,除了Origin以外,多了两个头:

服务的收到预检请求,如果许可跨域,会发出响应:

除了 Access-Control-Allow-Origin 和 Access-Control-Allow-Credentials 以外,这里又额外多出3个头:

如果浏览器得到上述响应,则认定为可以跨域,后续就跟简单请求的处理是一样的了。

虽然原理比较复杂,但是前面说过:

事实上,SpringMVC已经帮我们写好了CORS的跨域过滤器:CorsFilter ,内部已经实现了刚才所讲的判定逻辑,我们直接用就好了。

在 Application 下编写一个配置类,并且注册CorsFilter:

结构:

放到Application下即可。

4.5.4.重启测试:

访问正常:


文章标题:java代码跨域cors,javascript跨域
分享路径:http://www.cdkjz.cn/article/dsidpph.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220