VUE SSM跨域问题

写在前面：本人在看了一下午vue的基础知识以及码测试代码下，已经初步掌握vue的语法结构和组件结构。于是迫不及待的开始尝试vue和ssm的跨域。本以为会花许多时间，没想到却水到渠成。下面记录2种跨域方法。

条件：

1.vue的项目下载axios(我采用vue官网推荐的第三方插件进行跨域，当然你也可以选择其他2种请求方式)，下载后去main.js配置全局axios

cnpm install axios --save

2.ssm项目基本配置：能够运行，最好有log4j日志记录，方便查错解析问题

 

一：后端ssm处理跨域（推荐）

这种方式处理及其简单，一个过滤器，一个注解即可。

直接上代码：

public class MyCrossFilter implements Filter {

    @Override  
    public void destroy() {  
          
    }  
  
    @Override  
    public void doFilter(ServletRequest req, ServletResponse res,  
            FilterChain chain) throws IOException, ServletException {  
            HttpServletResponse response = (HttpServletResponse) res;  
            response.setHeader("Access-Control-Allow-Origin", "你前端项目的域名(例如：http://localhost:8080)");  

        response.setHeader("Access-Control-Allow-Credentials", "true");
            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");  
            chain.doFilter(req, res);  
          
    }  
  
    @Override  
    public void init(FilterConfig arg0) throws ServletException {  
          
    }  


}

"Access-Control-Allow-Origin:就是指明特定的域名才能访问后端的接口。

如果设置 Access-Control-Allow-Origin:*，则允许所有域名的脚本访问该资源，但是不推荐，最好指明域名。因为我在测试的过程中如果写通配符则会报：

 

下来就是在Controller每个方法前加

        1.@ResponseBody：方法自动将返回给前端的数据解析为json在发送
        2. @CrossOrigin：跨域标配，读者自行百度

测试接口代码：

@RequestMapping(value="/Axios.action",method= {RequestMethod.POST,RequestMethod.GET})
		@ResponseBody
		@CrossOrigin
		 public Map<String ,Object> Axios(HttpServletRequest request,HttpServletResponse response) {
			System.out.println("跨域测试2222222");
			Map<String ,Object> map =new HashMap<String ,Object>();
			map.put("test", "跨域成功！");
			return map;
			
		}

 

VUE测试方法：

重要：用axios请求时你可以把请求路径写全，写可以去配置axios默认访问路径(推荐).

这其实就是前面提到的axios全局配置：注意实在main.js中

var axios = require('axios')
axios.defaults.baseURL = "http://localhost:8888/Scratch/"
axios.defaults.withCredentials = true
Vue.prototype.$axios = axios

方法：

    Axios(){
     this.$axios.post('User/Axios.action').then(function (response) {
       
        console.log(response);
        
      }).catch(function (error) {
        console.log(error);
      });

      }

这样请求路劲就是：默认路径+User/Axios.action

测试结果：

 

二.通过vue配置代理来跨域

在vue项目的config下index.jsp配置：只需写方框中代码即可

下来就看读者自己的意愿来配置默认路径。如果不配置，请一定要写全，请一定要写全，请一定要写全。

但是这种方式配置解决跨域，打包部署时还按这种方法会出问题。（读者自行解决）