ajax如何跨域请求webservice

CORS是一个W3C尺度，全称是"跨域资本共享"（Cross-origin resource sharing）。

它许可浏览器标的目的跨源办事器，发出XMLHttpRequest请求，从而降服了AJAX只能同源利用的限制。

东西/原料

• springboot

方式/步调

1. 1

   已springboot项目为例，启动一个办事端（9000），一个客户端（8002），他们端口分歧，利用客户端请求办事端数据，模拟CORS

   
2. 2

   在客户端前台js中添加如下代码，请求办事端的一段文本

   
3. 3

   办事端的Controller如图

   
4. 4

   最主要的是：办事端需要撑持CORS，即办事端需要赞成来自其他域的请求。在办事端添加如下代码，即增添一个过滤器，使其响应跨域请求

   
5. 5

   打开界面，请求数据。办事端启在9000端口，而客户端启在8002，按照同源策略，他们属于分歧的域，客户端对办事端的请求属于跨域请求。

   
6. 6

   从上图可以发现，一次点击/msg请求，浏览器发了两次请求，下面我们具体看一下，跨域请求起首会发生OPTIONS请求（预检请求），标的目的办事器扣问我要跨域利用Get请求了，你许可吗？办事端回应许可，而且你的请求头中只能包罗如下内容。

   
7. 7

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

   
8. 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. 9

   由上可见办事端撑持跨域是很主要的，前台Ajax并不需要额为的设置，浏览器主动会判定并发出预检请求。你也可以直接在controller上加注解实现该controller的跨域拜候