Try Everything Different In My Life.

「📝总结」跨域(CORS)的解决办法和原理

2017.06.26

跨域是我们常常遇到的问题

跨域问题是我们常常遇到的问题,网上解决方案一大堆,有大厂给的jar来解决问题的,也有自己写代码进行配置来解决跨域问题的。但是对于跨域的前世今生不是很了解,不知道为什么这个方案可以,原理是什么,所以系统的记录一下跨域的问题。

跨域是什么

跨域是浏览器端为了安全做的一道策略,我们在开发的时候,常常使用HTTP请求客户端(如:PostMan)来测试HTTP接口是否成功。我们前端的同事然后写ajax对同一接口进行请求,但是这个时候常常会出现Access-Control-Allow这个错误,这就是跨域。需要明确的是,跨域是浏览器端的一个策略实现。

跨域到底是什么,跨域的具体内容直接去上面提供的博客中查看,看完自己画一下,就应该都明白了。简单说一下就是我这个html页面中的JS脚本请求了跨站的资源,然后就会触发这个跨域的策略,如果返回的HTTP报文中响应头中没有相关的Access-Control-Allow头信息,浏览器就会报跨域的错误,如果配置了并且通过了那就不会报这个错。

怎么办呢?

既然已经知道跨域的原理是什么了,那解决起来就简单多了。思想就是给HTTP这个报文中的响应头中加上Access-Control-Allow的相关信息,我下面画一幅图。

跨域请求

我们前后端分离的项目中,静态资源文件常常是放在Nginx或者Apache这样的静态资源服务器中的,这里的js脚本文件写ajax请求请求相关的URI,然后返回相关的数据最后再到浏览器上。所以啊,我们可以在返回浏览器之前的任何地方来改写HTTP的响应头就好了。 一般在后台应用服务器这边解决,当然nginx也可以配置跨域,网上有很多博客,自己去搜索就好了,锻炼自己的搜商,后台配置也是一大堆,一般是使用servlet规范中的Filter接口来实现,具体的自己去搜索吧。

PS:HTTP协议实在是太重要有必要去好好学习一下。我写的一点关于HTTP协议的博客,点击搜索HTTP就应该能找到了。

参考