多语言展示
当前在线:1241今日阅读:154今日分享:43

ajax如何跨域请求webservice

CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
工具/原料

springboot

方法/步骤
1

已springboot项目为例,启动一个服务端(9000),一个客户端(8002),他们端口不同,使用客户端请求服务端数据,模拟CORS

2

在客户端前台js中添加如下代码,请求服务端的一段文本

3

服务端的Controller如图

4

最重要的是:服务端需要支持CORS,即服务端需要同意来自其他域的请求。在服务端添加如下代码,即增加一个过滤器,使其响应跨域请求

5

打开界面,请求数据。服务端启在9000端口,而客户端启在8002,根据同源策略,他们属于不同的域,客户端对服务端的请求属于跨域请求。

6

从上图可以发现,一次点击/msg请求,浏览器发了两次请求,下面我们详细看一下,跨域请求首先会发生OPTIONS请求(预检请求),向服务器询问我要跨域使用Get请求了,你允许吗?服务端回应允许,并且你的请求头中只能包括如下内容。

7

然后浏览器发送正式的/msg请求,获取到了数据

8

字段说明:Access-Control-Allow-Origin   该字段是必须的。它的值要么是请求时Origin字段的值,要么是一个*,表示接受任意域名的请求。Access-Control-Allow-Credentials  该字段可选。它的值是一个布尔值,表示是否允许发送Cookie。Access-Control-Expose-Headers该字段可选。CORS请求时,XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段,就必须在Access-Control-Expose-Headers里面指定。Access-Control-Max-Age  该字段可选,用来指定本次预检请求的有效期,单位为秒。

9

由上可见服务端支持跨域是很重要的,前台Ajax并不需要额为的设置,浏览器自动会判断并发出预检请求。你也可以直接在controller上加注解实现该controller的跨域访问

推荐信息