angular/ng-alain/ionic/springmvc/node 跨域问题 解决方法

前言：

跨域问题只有通过后台解决！后台解决！后台解决！重要的事情说三遍！

重点：

1.如果你是纯前端，请告诉自己的后台让他来解决跨域问题，你就不需要看了。

2.如果你前后台都懂，但后台不在自己手里面，请看完解决办法后，右转使用反向代理。

3.如果你前后台都懂，而且后台在自己手里，请继续往下看。

4.这里只提供cors的跨域解决办法。

正文：

1.产生原因

它是由浏览器的同源策略造成的，是浏览器施加的安全限制。

2.解决办法

2.1 产生跨域请求的时候，前台首先会向后台发送OPTIONS请求判断时否允许跨域。此时后台只需要返回允许跨域的headers即可。换句话说允许跨域只需要后台修改http header就可以解决问题。

** 后台主要是四个header (这些是在后台修改的，前台改这个没有用！！！！！！)

2.1.1  Access-Control-Allow-Origin 允许跨域的访问地址。比如  http://localhost:8088，但也可以直接配置成通配符 *（* 这样会产生前台无法携带cookies的问题，造成后台session失效）

2.1.2 Access-Control-Allow-Methods 允许跨域访问的请求方式。比如 GET,POST,OPTIONS

2.1.3 Access-Control-Allow-Credentials 是否允许携带cookies 需要Access-Control-Allow-Origin 不为 *

2.1.4 Access-Control-Allow-Headers 允许跨域访问的header，比如 X-Requested-With,Origin,Content-Type,application/json,Authorization,Token 这些header需要在此处配置，否则会发生 header is not allowed错误。

** 前台需要添加的header(这个是在前台添加的！！！！！！)

2.1.5 withCredentials: true  是否允许携带cookies，需要后台Access-Control-Allow-Origin 不为 *。

3.例子 （提供Node.js 与 Spring MVC两种，不提供源码反正我也是复制的自己找吧，写的比较粗糙，大佬们见谅。）

3.1 Spring mvc 

添加一个corsfilter，全局处理访问请求即可，filter顺位要求最优先。

我这里是把对应的配置信息写在了web.xml里面，提供对应的web.xml配置信息。

3.2 Node.js 

、

直接写在app.js 处理即可。

4.总结

4.1 跨域后台改一下header就可以解决了，没有想象中那么麻烦。

4.2 跨域post会发送两次，第一次是options，options通过才会发送post

4.3 如果 Access-Control-Allow-Origin设置为*，前台会无法携带cookies造成后台session无法使用。当然后台可以用其他方式解决，比如用jwttoken然后从redis中取session数据。

4.4 付成功效果图

4.5 Options 返回状态码应该是 204。即无返回内容状态。