开发模式上想前后端分离,但是在使用axios交换数据的时候,提示Access-Control-Allow-Origin跨域问题,解决方案跟客户端没关系,修改的是服务端,使用cors filter,下面详细介绍调试过程。
故障
请求异常,报错Access-Control-Allow-Origin,属于跨域问题。
解决方案
跨域问题属于后台的安全拦截,跟客户端没关系,在java后台,使用cors filter进行拦截处理,引用maven库cors-filter
<dependency>
<groupId>com.thetransactioncompany</groupId>
<artifactId>cors-filter</artifactId>
<version>2.5 </version>
</dependency>
<dependency>
<groupId>com.thetransactioncompany</groupId>
<artifactId>java-property-utils</artifactId>
<version>1.9.1</version>
</dependency>
修改web.xml,增加cors过滤器,在cors.supportedHeaders节点中,增加Access-Control-Allow-Origin,该处也可以改成*
<!-- CORS -->
<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, Access-Control-Allow-Origin</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.allowOrigin:可以通过的ip,*代表所有,可以使用指定的ip,多个的话可以用逗号分隔,默认为*
cors.supportedMethods:请求方式 默认为*
cors.supportedHeaders:请求支持的头信息,默认为*
cors.exposedHeaders:暴露的头信息,默认的empy list
cors.supportsCredentials:支持证书,默认为true
cors.maxAge: 最大过期时间,默认为-1
cors.tagRequests: 默认为false
cors.allowSubdomains:允许子域 默认为false
详细设置,可参考官网:http://software.dzhuvinov.com/cors-filter-configuration.html