跨域问题解决（一）：tamcat下的配置

前言

         之前给微信公众号写接口，写完接口，自测通过后。给前段调用的时候，一直调不通，一直提示“Access-Control-Allow-Origin”相关字眼，当时以也没有仔细看，上网直接找了这个关键词。发现是跨域问题造成的。后台在web.xml中添加了cors配置后就好了（由于我自己是在Tomcat下部署的项目）。今天将这个解决过程记录一下。多多学习。

        因为我看网上跨域问题解决方式有好多，前段解决&后端解决，这里我只记录了我自己的解决方式。其他的解决方式可以学习。

一、跨域请求

         我们先看看一下域名地址的组成：

        http:// www .google : 8080 / script/jquery.js

　　1.http:// （协议号）

　　2.www  （子域名）

　　3.google （主域名）

　　4.8080 （端口号）

　　5.script/jquery.js （请求的地址）

        跨域请求：当协议、子域名、主域名、端口号中任意一各不相同时，都算不同的“域”。 不同的域之间相互请求资源，就叫“跨域”。；

       eg：http://www.a.com/index.html 请求http://www.b.com/index.html的数据

二、什么是跨域请求：

        跨域是指a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，或是a页面为ip地址，b页面为域名地址，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。

三、跨域问题的产生原因 ：

Uri	说明	是否跨域
http://www.cnblogs.com/a.js http://www.a.com/b.js	不同域名	是
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同域名下不同文件	否
http://www.a.com:8000/a.js http://www.a.com/b.js	同域名下不同端口	是
http://www.a.com/a.js https://www.a.com/b.js	同域名 不同协议	是
http://www.a.com/a.js http://70.32.92.74/b.js	域名和域名对应ip	是
http://www.a.com/a.js http://script.a.com/b.js	主域名相同 子域名不同	是（cookie不可访问）
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名（同上）	是

 

四．跨域问题的解决：

由于我自己是在tomcat下配置的项目。项目引入了maven。

首先maven引入：cors-filter-1.7.jar，java-property-utils-1.9.jar这两个jar包。

然后配置工程项目中web.xml文件，配置信息如下：

 <filter>         
•      <filter-name>CORS</filter-name>  
•      <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>  
•      <init-param>  
•       <param-name>cors.allowOrigin</param-name>  
•          <param-value>*</param-value>  
•      </init-param>  
•      <init-param>  
•       <param-name>cors.supportedMethods</param-name>  
•          <param-value>GET, POST, HEAD, PUT, DELETE</param-value>  
•      </init-param>  
•      <init-param>  
•       <param-name>cors.supportedHeaders</param-name>  
•          <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>  
•      </init-param>  
•      <init-param>  
•          <param-name>cors.exposedHeaders</param-name>  
•          <param-value>Set-Cookie</param-value>  
•      </init-param>  
•      <init-param>  
•          <param-name>cors.supportsCredentials</param-name>  
•          <param-value>true</param-value>  
•      </init-param>  
•  </filter>  
•    
•  <filter-mapping>  
•      <filter-name>CORS</filter-name>  
•      <url-pattern>/*</url-pattern>  
•  </filter-mapping> 

五、CORS介绍：

      CORS(Cross-Origin Resource Sharing) ：跨域资源共享

我的解决方式就是上面的，如果你也和我一样，项目是部署在tomcat下，只需要添加上面xml的配置，就可以解决这个问题。

其他的解决方式，我还会继续学习哦。随时来补贴。