跨域访问|学习笔记

简介: 快速学习跨域访问

开发者学堂课程【高校精品课-厦门大学 -JavaEE 平台技术跨域访问学习笔记,与课程紧密联系,让用户快速学习知识

课程地址:https://developer.aliyun.com/learning/course/80/detail/15964


跨域访问


内容介绍:

一、跨域服务的流程

二、WebMvcConfigurer接口 


一、跨域服务的流程

1.服务器操作

跨域的服务调用是我们今天普遍的一个现象,今天我们的服务器已经把前端后端分离了,所以前段会有一个独立的 web 服务器去存储前端的 html  javacookie 的代码或者小程序而后端会用另外一台服务器运行 Servert 容器以及在 servert 容器上的 spring 的框架,由于前端静态的页面 JavaScript 和后端的的提供服的 api 的服务器不是同一台服务器就会产生跨源服务调用的问题在浏览器中间为了安全起见是不允许跨域服务调用的如一个请求来自 a 服务器另一个是 b 服务器发出请求调用

2.两种跨源服务请求

在今天的应用场景中我们怎样让跨源服务器变成一种请求,主要是通过这样一种方式在 http/ 上完成的,跨源服务处理方式有两种一种是简单请求一种是非简单请求由于我们的应用环境来回传的是 application json 格式所以它归属于非简单请求,非简单请求是浏览器向服务器发出真正的请求之前先要做一次询问叫做预检请求,对于一个 url 发出 option 操作,这中间包含了当前域名的服务器静态网页 html/JavaScript 来源的这台服务器的域名以及它来源的服务器它的域名以及它

想要做的什么操作。

举个例子,

OPTIONS/cors HTTP/1.1

Origin:http://api.bob.com

Access-Control-Request-Method:PUT

Access-Control-Request-Headers:X-Custom-Header

Host:Language:en-US

Connection:Keep-alive

User-Agent:Mozilla/5.0

这样的例子发出的请求的来源是 api.bob.com 打算用 put 方式去访问 api.alice.com 这样的一个服务器, api.alice.com 接收到预检的请求后会检查它的这个 option 请求中间的 origin 和它访问的方法还有可以有的头是否在服务器设置允许跨源的请求范围内,如果说origin 以这样的一种请求方式包含这样一个头来访问服务器的话就会给出回应,如果不允许的话就不会给出回应,在回应中我们可以看到它有一个 origin ,就是说这个来源的服务器api.bob.com 这个服务器允许的服

务器包括了

Access-Control-Allow-Methods:OET,POST,PUT允许请求的时候包含了一个

Access-Control-Allow-Headers:X-Custom-Header的只样一个头,服务器通过了这样一个预检的请求客户端可以向服务器发送正式的跨源的请求称之为 CORS Request。

HTTP/1.1 200 OK

Date: Mon,01 Dec 2008 01:15:39 GMT

Server:Apache/2.0.61(Unix)

Access-Control-Allow-Origin:http://api.bob.com  

Access-Control-Allow-Methods:GET,POST,PUT Access-Control-Allow-Headers:X-Custom-Header Content-Type:text/html;charset=utf-8

Content-Encoding:gzip Content-Length:0

Keep-Alive:timeout=2,max=100

Connection:Keep-Alive

Content-Type:text/plain

image.png

在每一个跨源的请求中间都需要包含一个 origin 的头 origin:http://api.bob.com 来表示这个请求的来源是什么地方,通过检查头也就是服务器是否能对请求进行回应,这是从网络协议的角度来描述跨源服务是怎样完成的,具体到 springMVC 中怎样来配置服务器端允许哪些 origin 用什么方法以及用什么头来访问服务器。

PUT/cors HTTP/1.1

Origin:http://api.bob.com

Host:api.alice.com

X-Custom-Header:value

Accept-Language:en-US

Connection:Keep-alive

User-Agent:Mozilla/5.0...

 

二、WebMvcConfigurer 接口

1.WebMvcConfigurer 接口的作用

SpringMVC 中间是通过 WebMvcConfigurer 接口来配置跨源请求的,所以需要实现接口的对象配置到 Spring 的框架中间告诉我们这台服务器允许从哪个来源来的,用什么样的请求,包含了什么样的头的请求来执行跨源请求服务。具体看代码

是什么写的。

2.四种方式设置跨域访问

我们可以多种方式来设置跨域访问。

一种方式是用 @cross origin 这个可以在类的前面或者在方法的前面去设定说一个

类一个方法所允许的来源的服务器是什么,就是用 @cross origin 的注解来写。

很多情况下要对整个服务器所有的请求都设定一个统一的来源服务器的地址。这时候一般会使用 WebMvcConfigurer 接口,它可以设定一个全局的跨域访问的规则所以我们在代码中间就采用了这样的方式在实现跨域访问的配置在在代码中间就实现了 WebMvcConfigurer 接口对象,把它放在 configurer 下,一般所有配置的类都放在一个包底下,在这个类的前面可以看到有写了一个注解叫做 @Configuration ,springboot 会在整个目录里去找配了@Configuration 注解的类,会认为这个类是用来做配置信息的所以注解的作用就是告诉spring容器这个类做的是配置信息。

这个类class corsconfig 实现了 WebMvcConfigurer 接口,接口里面有非常多的可以实现的方法用来配置 springMVC 的各方面。但是在这个例子中仅仅用了addcorsmapping方法实现去设定跨域访问的配置,可以看到这个方法是有一个参数 corsregistry 就是把跨域的设置通过这个参数把它设置到系统中去。在这个方法中,它就是前面的几条配置第一个是 add mapping,它是可以去设置说这样的跨域

访问是对哪些 url 是有效的。现在的**是对所有的url都有效。

第二个就是 allowedorigins 这个是说明设定是哪个来源,现在给的是*说明所有来

源都可以,但正式系统这样是不安全的,是应该设定具体的IP和运营。

第三个是 allowedheaders,说明可以加什么样的头。现在是放开的。第四个是allowedmethods,限定了 post、get、put、option 和 head 这几种操作是可以通过跨源来请求的。最后一个是 maxage 就是有效的时间,通过重写了这个方法就可

以对项目中间所有的跨源访问都设定成全局系的配置。

Registry.addMapping(pathPattern:”/**”)

.allowedOringins(“*”)

.allowedHearders(“*”)

.allowedMethoders(“GET”,”POST”,“DELETE”,”PUT”,”OPTIONS”,”HEAD”)

.maxAge(3688);

相关文章
|
3月前
|
存储 JSON JavaScript
跨域问题
跨域问题
59 1
|
11月前
|
JSON 前端开发 JavaScript
解决跨域问题
解决跨域问题
|
JSON JavaScript 前端开发
如何处理跨域请求:JSONP、CORS 和代理服务器
处理跨域请求是前端开发中的常见挑战,因为浏览器的同源策略限制了在不同域名、协议或端口之间进行直接通信。为了解决跨域请求的问题,可以使用以下三种常见的方法:JSONP、CORS和代理服务器。
454 0
|
Web App开发 JSON 前端开发
跨域问题总结
跨域问题总结
1031 0
跨域问题总结
|
JSON Android开发 数据格式
|
JSON 缓存 JavaScript
同源策略与跨域访问(jsonp和cors等)
同源策略与跨域访问(jsonp和cors等)
311 0
同源策略与跨域访问(jsonp和cors等)
|
前端开发 安全 JavaScript
同源策略的介绍| 学习笔记
快速学习同源策略的介绍。
同源策略的介绍| 学习笔记
|
缓存 应用服务中间件 Linux
跨域访问
跨域是指从一个域名的网页去请求另一个域名的资源。比如从 www.a.com 页面去请求 www.b.com 的资源。
跨域访问
|
前端开发
跨域问题不一定真的是跨域了???
跨域问题不一定真的是跨域了???
178 0
跨域问题不一定真的是跨域了???
|
JSON JavaScript 前端开发
学习AJAX必知必会(5)~同源策略、解决跨域问题(JSONP、CORS)
学习AJAX必知必会(5)~同源策略、解决跨域问题(JSONP、CORS)
260 0
学习AJAX必知必会(5)~同源策略、解决跨域问题(JSONP、CORS)