前后端分离开发跨域问题解决方案

一、什么是跨域

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。

这里说明一下，无法跨域是浏览器对于用户安全的考虑，如果自己写个没有同源策略的浏览器，完全不用考虑跨域问题了。是浏览器的锅，对。

同源策略限制了一下行为：

Cookie、LocalStorage 和 IndexDB 无法读取

DOM 和 JS 对象无法获取

Ajax请求发送不出去

首先狭义的同源就是指，域名、协议、端口均为相同。

下面举个例子：

http://www.nealyang.cn/index.html 调用   http://www.nealyang.cn/server.php  非跨域

http://www.nealyang.cn/index.html 调用   http://www.neal.cn/server.php  跨域,主域不同

http://abc.nealyang.cn/index.html 调用   http://def.neal.cn/server.php  跨域,子域名不同

http://www.nealyang.cn:8080/index.html 调用   http://www.nealyang.cn/server.php  跨域,端口不同

https://www.nealyang.cn/index.html 调用   http://www.nealyang.cn/server.php  跨域,协议不同

localhost   调用 127.0.0.1 跨域

二、如何解决跨域问题

利用SpringMVC @CrossOrigin注解

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

//@CrossOrigin(value = "*", allowCredentials = "true")
public class BaseController {
    
    
    protected Logger log = LoggerFactory.getLogger(this.getClass());
}

CrossOrigin这个注解可以允许ajax跨域请求…但是有个很明显的缺点就是ajax会请求2次,第一次请求类型是options.查看是不是允许发起跨域请求.然后才会发起get呀post呀这样的请求…这就很蛋疼了.相当于需要花费额外的时间再请求上.毕竟请求次数翻倍了.

另外如果要传输cookies的话似乎需要额外设置

allowCredentials = “true”

具体我也没试过.因为那个时候我用另外一种方法去解决了,不过看api文档上是说设置成true就可以解决了…

这种方式除了请求次数变多以外,我感觉还有1个主要问题就是你得设置你允许哪些站点跨域访问你…你为了开发方便设置成*…那么实际上了生产…别人哪个域名都可以给你发跨域请求…这就很尴尬了…而且注解是写在代码里的.你很难在生产和开发中分别设置不同的值.