vue proxyTable 介面跨域請求問題處理
阿新 • • 發佈:2019-01-08
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>