前言:
跨域问题只有通过后台解决!后台解决!后台解决!重要的事情说三遍!
重点:
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。即无返回内容状态。