只要经常开发前端的程序员对跨域肯定不陌生，尤其是在如今前后台分离开发的模式，前台和后台并不在一个服务器上，所以跨域成了不可避免的问题。
以前因为项目开发模式还是老旧的jsp，服务都在一台服务器上，所以一直没过多了解。这次开发新项目时想去尝试学习Vue，采用了前后端完全分离的开发模式，在本地测试的时候因为端口号导致ajax请求失败。既然遇到了，这次就一定要把跨域彻底搞清楚，并找到解决方案。
在解决之前，先来了解一下跨域是什么，官方说法：跨域;
看过之后应该对跨域和解决方案CORS是什么有个简单了解了吧。
跨域问实际上是为了保证网站内容的安全，对于非同源的访问做了限制。具体的细节我就不多说了，直接上解决方案：
1.简单请求:
请求方法限制：HEAD,GET,POST
请求头限制：
不允许有自定义请求头选项，只能包含以下几个请求头：
* Accept
* Accept-Language
* Content-Language
* Content-Type
* DPR
* Downlink
* Save-Data
* Viewport-Width
* Width
其中Content-Type只能是：application/x-www-form-urlencoded、multipart/form-data、text/plain；
2.服务器端允许跨域
简单请求是协议天然允许的，只是有一些限制，但是这些简单请求显然无法满足我们的需求，尤其是Ajax的跨域，此时就需要让服务器允许跨域请求的访问。
原理就不细说了，CORS的文档中有详细介绍，简单点就是：
一个跨域请求的在发送之前，浏览器会先向服务器发送一条请求（官方叫做：Preflighted requests），其中头信息包含：
- Origin: http://foo.example
- Access-Control-Request-Method: POST
- Access-Control-Request-Headers: X-PINGOTHER, Content-Type
用来告知服务器跨域请求的信息，然后服务器给予回应告诉浏览器自己所支持的跨域请求： - Access-Control-Allow-Origin: http://foo.example
- Access-Control-Allow-Methods: POST, GET
- Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
- Access-Control-Max-Age: 86400
从名字便可以看出来，分别是支持的源服务器，方法，自定义头，和Preflighted requests的缓存时间。
这样一看解决跨就很简单了，只要我们在response中添加这几条头信息就可以啦。接下来就试试，测试用例是本地服务，前端端口和后台端口不一样，后台是Spring Boot，马上动手试试：
手动设置
image.png
手动给response添加这几个Header，看看请求信息：
image.png
说明请求成功了，从response headers中也能看到咱们的添加的header信息。
过滤器
一个一个设置太过麻烦，但这是最安全的，可以精准到方法级别，如果想要全部支持跨域，自然想到用过滤器来控制，统一添加header便可；
Spring mvc的@CrossOrigin注解
过滤器好用，但没法精确配置，手动设置又太麻烦，这时候框架的威力就显示出来了，只要在方法加上这个注解，配置@RequestMapping就可以支持跨域了：
image.png
3其他方法
除了CORS，还有JSONP和本身就支持跨域的标签，如img,iframe等，这些需要的自己去了解一下。
文章参考了sf的一篇优秀文章，写的更加优秀和详细哦不要再问我跨域的问题了
网友评论