SSM与VUE移动端跨域总结

1、配置跨域过滤器：

注意这里不能使用***不即能使用全局，不然会导致cookie无效。

httpServletResponse.setHeader(“Access-Control-Allow-Origin”, “**”);
特别注意我们的Access-Control-Allow-Headers信息

package filter;
import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CrossFilter implements Filter{
	private boolean isCross = false;
	
	@Override
	public void destroy() {
		isCross = false;
	}
	
	@Override
	public void doFilter(ServletRequest request, ServletResponse response, FilterChain filterChain)
			throws IOException, ServletException {
		if (isCross) {
            HttpServletRequest httpServletRequest = (HttpServletRequest) request;
            HttpServletResponse httpServletResponse = (HttpServletResponse) response;
            
            System.out.println("拦截请求: " + httpServletRequest.getServletPath());
            
            httpServletResponse.setHeader("Access-Control-Allow-Origin", "http://192.168.73.103:8081");
            httpServletResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
            httpServletResponse.setHeader("Access-Control-Max-Age", "0");
            httpServletResponse.setHeader("Access-Control-Allow-Headers",
                    "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token");
            httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true");
            httpServletResponse.setHeader("XDomainRequestAllowed", "1");
        }
		
		filterChain.doFilter(request, response);
	}
	
	@Override
	public void init(FilterConfig filterConfig) throws ServletException {
		 String isCrossStr = filterConfig.getInitParameter("IsCross");
	     isCross = isCrossStr.equals("true") ? true : false;
	     System.out.println(isCrossStr);
	}

}

2、配置web.xml

<!-- 解决跨域Filter -->
  <filter>
  	<filter-name>CrossFilter</filter-name>
  	<filter-class>filter.CrossFilter</filter-class>
  	<init-param>
  		<param-name>IsCross</param-name>
  		<param-value>true</param-value>
  	</init-param>
  </filter>
  <filter-mapping>
  	<filter-name>CrossFilter</filter-name>
  	<url-pattern>/*</url-pattern>
  </filter-mapping>

3、配置springmvc.xml

<!-- 配置跨域 -->
	<mvc:cors>
		<mvc:mapping path="/**" 
		allowed-origins="http://192.168.73.103:8081" 
		allowed-methods="POST, GET, OPTIONS, DELETE, PUT" 
		allowed-headers="Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With" 
		allow-credentials="true"/>
	</mvc:cors>

4、要想cooklie有效,VUE的main.js里axios还需要加以下代码

axios.defaults.withCredentials = true//开启跨域

这里顺便配上axios的使用
1、main.js的配置

//Axios
import axios from "axios"
axios.defaults.withCredentials = true  //开启跨域
axios.defaults.baseURL ='http://192.168.1.104:8080'
Vue.prototype.axios = axios;

import qs from 'qs'
Vue.prototype.qs = qs;

2、具体使用,可以配合上qs进行传参

let comValue = this.qs.stringify({
    year:this.year,
})
this.axios({
       url:'/dayi/dayi/xxx',
       method:'post',
       data:comValue
   }).then((response)=>{
   	console.log(response.data);
   	response.data.forEach(item=>{
this.course_List.push(item);
})
   }).catch((error)=>{
       Toast("对不起,系统错误");
   })

5、如果想让手机在同网段访问,您可以在前端进行以下操作

5.1、关闭电脑防火墙

5.2、设置访问的路径

axios.defaults.baseURL ='http://192.168.73.103:8080'

5.3、修改package.json中的dev的信息

"dev": "webpack-dev-server --open --host 192.168.1.104",

总结

接下来你就可以打开手机,和电脑一样进行操作啦,这里讲的是移动端的哦。