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配置:只需写方框中代码即可

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

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

 

展开阅读全文
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值