最近做一个微信小项目遇到一个跨域问题，就是我的前端和后端是放在不同的服务器上的，然后使用opst请求的时候

报错。之前我是没有了解过跨域这个问题的，然后我就上网去查了很多资料，看也很多人写的跨域的博客，然后完成了跨域的问题。

一、什么是跨域：

　　　　跨域是指 不同域名之间相互访问 例如 我的电脑上有2个服务器 192.168.0.11 192.168.0.12 如果第一个服务器上的页面要访问第二个服务器 就叫做跨域 或者http://www.baidu.com 要访问http://www.xxx.com 也是不同域名 也是跨域 。传统的Ajax请求只能获取在同一个域名下面的资源，但是HTML5打破了这个限制，允许Ajax发起跨域的请求。浏览器是可以发起跨域请求的，比如你可以外链一个外域的图片或者脚本。但是Javascript脚本是不能获取这些资源的内容的，它只能被浏览器执行或渲染。主要原因还是出于安全考虑，浏览器会限制脚本中发起的跨站请求。跨域的解决方案有多中JSONP、Flash、Iframe等，当然还有CORS（跨域资源共享，Cross-Origin Resource Sharing）今天就来了解下CORS的原理，大家如果想了解CORS详解可以去 http://www.ruanyifeng.com/blog/2016/04/cors.html

二、CORS浏览器支持情况如下图：

因为我用的是Spring MVC,所以也是用Spring MVC做例子。

　　Spring MVC 从4.2版本开始增加了对CORS的支持，在spring MVC 中增加CORS支持非常简单，可以配置全局的规则，也可以使用@CrossOrigin注解进行细粒度的配置。

　　使用@CrossOrigin注解

　　首先在自己Controller那里打上一个注解就可以了

　　@CrossOrigin(origins = "http://www.xxx", maxAge = 3600,methods={RequestMethod.POST})    @RequestMapping(value="/getPlateAll")    @ResponseBody    public Object getPlateAll(){        Map<String,Object> map = new HashMap<String,Object>();        List<PageData> list=null;        try{            list=plateService.getPlateAll(null);        }catch (Exception e){            logger.error(e.toString(),e);        }        map.put("list",list);        return AppUtil.returnObject(new PageData(), map);    }

像上面代码块红色的就是跨域的注解，也可以把它写在Controller头上，默认情况下所有的域名和GET、HEAD和POST方法都是允许的。上面代码块我加了粉红的注解大家都知道干嘛的，我把它加上颜色是因为我做的时候没有写上这个注解，

然后就报我404的错误，希望大家引以为戒。还有很多方法，我觉得这个是最方便的，所以就写下来了。其它的还没有时间去研究，以后有空回去研究下然后写出来给大家看。

页面的ajax就是平常的就行了，下面是我的简单ajax

 1 function dianzan(cid){ 2             $.ajax("http://qcdqkj.tunnel.qydev.com/qcdqkj/appthumb/thumbByUserIdandCirclesId", { 3                 type: "POST", 4                 data: { 5                     C_ID: cid 6                 }, 7                 success: function() { 8                     //成功10                 }11             });12         }

Spring mvc 跨域问题解决