这些天做一个网站,使用动静分离的方式,前端使用vue.js开发,后台用的java写的接口,就遇到了跨域的问题。
以前只是在移动端app上集成一个html页面而已,所以以前解决跨域的问题都是使用jsonp方式,但是现在要开发一个网站,会有上传文件的业务,由于jsonp只支持get请求,就无法满足了,想到了用CORS的方式,在网上查了下资料,发现好多都不太对,下面记录一下,很简单。
1、只需要两个jar包,一个是java-property-utils,另一个是cors-filter 这两个jar包,其中java-property-utils可以在阿里的maven仓库中找到,cors-filter这个jar包阿里仓库中找不到,需要自己下载然后放到项目中。
2、pom.xml中添加配置,是为了配置maven中导入java-property-utils 这个jar包
<!-- 跨域过滤器相关 begin-->
<dependency>
<groupId>com.thetransactioncompany</groupId>
<artifactId>java-property-utils</artifactId>
<version>1.9.1</version>
</dependency>
3、手动下载并导入cors-filter这个jar包,我这里的是cors-filter-1.7.1.jar版本
4、web.xml中的配置
<!-- 跨域过滤器begin -->
<filter>
<description>跨域过滤器</description>
<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>
<!-- 跨域过滤器end -->
其中
<param-name>cors.allowOrigin</param-name>
<param-value>*</param-value>
可以配置允许跨域的域名,*表示所有域名都允许。