说说ajax跨域那点事

小编我最近从朋友那里免费入手一台主机，给它装了ubuntu server，搭建了nginx和tomcat，以及mysql数据库。然后我想着，自己搭个web呗，就当练练手了。

1、一些基本构思

我简单构思了下，决定采用前后台分离的模式。前台采用html静态页面，托管于nginx，提供界面操作；后台采用 spring mvc+spring+mybatis ，托管于tomcat容器，主要是对前台提供json数据接口服务；数据库采用轻量级的mysql。前台通过ajax实现与后台的数据交互。

2、发现跨域问题

后台基本上都搭好了，写了基本的登录登出接口，然后在前台写js进行调用，结果浏览器console报错：No 'Access-Control-Allow-Origin' header is present on the requested resource.

对于英语水平不咋滴的小编来说，这句话我当然不知道是啥意思，也没遇到过这个问题。然后我各种百度，大致明白了是因为前后跨域提交的请求到达后台后，后台没有在response的header中写入一些跨域访问的信息：

// 指定允许其他域名访问

header('Access-Control-Allow-Origin:*');

// 响应类型

header('Access-Control-Allow-Methods:POST');

// 响应头设置

header('Access-Control-Allow-Headers:x-requested-with,content-type');

然后我在后台配置了一个Filter，用来动态地配置允许跨域访问的前段域信息。

再次测试，ok，console没有再出现这个错误，并且成功地获取到了后台的数据。正当我得意洋洋成就感爆棚的时候，我突然发现每一次请求，后台打印出来的session id都不一样，也就是前后台没有达到会话一直！！！这该如何是好，会话不一致不就等于零吗。。。我静下心思考了一下会话的机制，然后我想到了cookie，一定是请求的时候没有将想过的cookie提交到后台。

这是会话不一致时的前台ajax代码：

然后我仔细查阅了jquery ajax的api，终于让我找到了解决方法，需要再jquery ajax参数中配置withCredentials为true，如下：

继续测试，问题完美解决！

来一张登录界面图（因为我确实没有图可以展示了，囧）

写在最后：

刚刚入驻头条号，第一篇文章。谢谢看到这篇文章的所有人，希望能和各位热爱互联网的朋友共同成长共同进步！