创新实训个人进度博客（12）——跨域问题

浏览器的同源策略为什么要有跨域限制如何解决跨域限制allowedOriginsallowedMethodsallowCredentialsmaxAgeallowedHeaders 总结

再进行前后端对接的过程中，我们遇到了一个不同端口间访问数据的问题，就是所谓的跨域问题。

浏览器的同源策略

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说 Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

它的核心就在于它认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时，它们应该只被允许访问来自同一站点的资源，而不是那些来自其它站点可能怀有恶意的资源。

同源策略如下： 当通信访问违背同源策略时，访问就会报错。

为什么要有跨域限制

因为存在浏览器同源策略，所以才会有跨域问题。那么浏览器是出于何种原因会有跨域的限制呢。其实不难想到，跨域限制主要的目的就是为了用户的上网安全。如果没有同源策略，那么一个网页就可以获取我们在另一个网页上保存的cookie等信息，造成不可估量的影响。

如何解决跨域限制

上有计策下有对策，当然我们是好的对策，是有利于我们开发的对策。我的主要任务是后端开发，因此着重研究了后端如何解决跨域问题。 在目录下创建一个configuration的package，并在其中创建一个Crosconfig.java的配置类，内容如下：

package com.example.demo2.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class CrosConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("http://192.168.1.103:8080") .allowedMethods("GET","HEAD","POST","PUT","DELETE","OPTIONS") .allowCredentials(true) .maxAge(3600) .allowedHeaders("*"); } }

allowedOrigins

允许请求的源，这里我填的是前端开发小伙伴的局域网IP，这样他才能在开发时访问我的后端接口。查阅官方文档发现，这个属性是可以设置为一个List的 并发现可以调用.addAllowedOrigins来添加允许的源

allowedMethods

允许的访问请求。这里把主流的请求类型都列出来了。

1、opions

返回服务器针对特定资源所支持的HTML请求方法 或web服务器发送*测试服务器功能（允许客户端查看服务器性能）

2、Get

向特定资源发出请求（请求指定页面信息，并返回实体主体）

3、Post

向指定资源提交数据进行处理请求（提交表单、上传文件），又可能导致新的资源的建立或原有资源的修改

4、Put

向指定资源位置上上传其最新内容（从客户端向服务器传送的数据取代指定文档的内容）

5、Head

HEAD就像GET，只不过服务端接受到HEAD请求后只返回响应头，而不会发送响应内容。当我们只需要查看某个页面的状态的时候，使用HEAD是非常高效的，因为在传输的过程中省去了页面内容。 6、Delete

请求服务器删除request-URL所标示的资源*（请求服务器删除页面） 7、Trace　　　　　　 回显服务器收到的请求，主要用于测试和诊断 8、Connect HTTP/1.1协议中能够将连接改为管道方式的代理服务器

在开发过程中最常用的请求就是Get和Post请求，其他的请求可以通过这两种请求实现。

allowCredentials

响应头表示是否可以将对请求的响应暴露给页面。返回true则可以，其他值均不可以。

Credentials可以是 cookies, authorization headers 或 TLS client certificates。

当作为对预检请求的响应的一部分时，这能表示是否真正的请求可以使用credentials。注意简单的GET 请求没有预检，所以若一个对资源的请求带了credentials，如果这个响应头没有随资源返回，响应就会被浏览器忽视，不会返回到web内容。

Access-Control-Allow-Credentials 头 工作中与XMLHttpRequest.withCredentials 或Fetch API中的Request() 构造器中的credentials 选项结合使用。Credentials必须在前后端都被配置（即the Access-Control-Allow-Credentials header 和 XHR 或Fetch request中都要配置）才能使带credentials的CORS请求成功。

maxAge

准备响应前的 缓存持续的 最大时间

allowedHeaders

这个我不是很清楚具体的作用是什么，大概是允许的请求头类型？

总结

在项目中加上这样一个配置类，跨域问题算是解决了，当然也有其他的方法，比如在controller头上添加注释，添加全局filter等方法，或者是在前端解决，都可以达到想要的效果。

———— 参考文章： https://blog.csdn.net/yup1212/article/details/87633272 https://www.cnblogs.com/m4tech/p/7871715.html https://www.cnblogs.com/guanpingping/p/10531718.html