1、前言
在使用vue开发移动端app时,使用http请求获取接口数据时,出现vue proxyTable接口跨域请求问题
2、vue http请求代码如下:
this.$http.post(this.URL + '/mobile/base/getBaseInfo.do',{type:1})
.then(function (res) {
alert(res.data.name)
})
.catch(function (error) {
this.$toast('获取基本信息异常');
});
java后台代码如下:
@ResponseBody
@RequestMapping("/getBaseInfo")
public Map<String,Object> getBaseInfo(Integer type,HttpServletResponse response){
Map<String,Object> map = new HashMap<String,Object>();
map.put("name", "张三");
return map;
}
vue报的错如下:
Failed to load http://127.0.0.1:8080/mobile/base/getBaseInfo.do: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9001' is therefore not allowed access.
2、解决方法
在后台的处理方法前加上代码
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization");
response.setHeader("Access-Control-Allow-Credentials","true");
修改后的后台代码如:
@ResponseBody
@RequestMapping("/getBaseInfo")
public Map<String,Object> getBaseInfo(Integer type,HttpServletResponse response){
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization");
response.setHeader("Access-Control-Allow-Credentials","true");
Map<String,Object> map = new HashMap<String,Object>();
map.put("name", "张三");
return map;
}
这样处理后,vue前端就可以正常接收到后台的请求响应了。
3、添加过滤器统一处理。
如果有多个请求,每一个后台方法处理都添加这样一段代码,很麻烦,实际上我们可以写一个过滤器统一处理
MobileFilter.java
@WebFilter("/MobileFilter")
@Component
public class MobileFilter implements Filter {
/**
* Default constructor.
*/
public MobileFilter() {
}
/**
* @see Filter#destroy()
*/
public void destroy() {
TODO Auto-generated method stub
}
/**
* @see Filter#doFilter(ServletRequest, ServletResponse, FilterChain)
*/
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) servletResponse;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization");
response.setHeader("Access-Control-Allow-Credentials","true");
filterChain.doFilter(servletRequest, servletResponse);
}
/**
* @see Filter#init(FilterConfig)
*/
public void init(FilterConfig fConfig) throws ServletException {
}
}
filter在web.xml中的配制:
<filter>
<filter-name>mobileFilter</filter-name>
<filter-class>com.base.filter.MobileFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>mobileFilter</filter-name>
<url-pattern>/mobile/*</url-pattern>
</filter-mapping>