Vue+Axois与SSM后台通信所遇问题

阳光穿透心脏的1/2处 2021-10-19 11:22 239阅读 0赞

1、跨域问题

前后端分离时需要解决跨域问题：

export function registerUser(data) {
      console.log('export function registerUser(data)');
      return request({
        baseURL:'http://127.0.0.1:8080',
        url: '/user/registerUser',
        method: 'post',
        data
      })
    }

将baseURL设置为后台服务器端口

public class RquestInterceptor extends HandlerInterceptorAdapter {
        /**
         * 预处理回调方法，实现处理器的预处理（如检查登陆），第三个参数为响应的处理器，自定义Controller
         * 返回值：true表示继续流程（如调用下一个拦截器或处理器）；false表示流程中断（如登录检查失败），
         * 不会继续调用其他的拦截器或处理器，此时我们需要通过response来产生响应；
         */
        @Override
        public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
                throws Exception {
            // 允许客户端携带跨域cookie
            // 当Access-Control-Allow-Credentials设为true的时候，Access-Control-Allow-Origin不能设为星号
            response.setHeader("Access-Control-Allow-Credentials", "true");
            // 允许指定域访问跨域资源
            //response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:9006, http://127.0.0.1:8080");
            response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));// *
            // 允许浏览器发送的请求消息头
            response.setHeader("Access-Control-Allow-Headers", request.getHeader("Access-Control-Request-Headers"));// *
            // 允许浏览器在预检请求成功之后发送的实际请求方法名
            response.setHeader("Access-Control-Allow-Methods", request.getHeader("Access-Control-Request-Method"));
            // 设置响应数据格式
            response.setHeader("Content-Type", "application/json");
            // 查看请求方法
            String method = request.getMethod();
            if(method.equals("POST")){
                Enumeration<String> enu = request.getParameterNames();
                while(enu.hasMoreElements()){
                    String paraName=enu.nextElement();
                    System.out.println(paraName+": "+request.getParameter(paraName));
                }
                System.out.println(method);
            }
            return true;
    
        }

在java中添加拦截器类，并配置在spring-web.xml

<mvc:interceptors>
            
            <mvc:interceptor>
                <mvc:mapping path="/**" />
                <bean class="com.cqut.wangyu.crm.filter.RquestInterceptor" />
            </mvc:interceptor>
            
            
        </mvc:interceptors>

到这里跨域问题解决完成。

2、axois传数据时json序列化问题

安装qs：npm install qs --save

使用qs.stringify(data)将数据序列化

import qs from 'qs'
    
     registerUser({ commit }, user) {
        user=qs.stringify(user);
        return new Promise((resolve, reject) => {
          registerUser(user).then(response => {
            const { data } = response;
            console.log('注册成功');
          }).catch(error => {
            reject(error)
          })
        })
      }

设置axios请求headers: \{'content-type':'application/x-www-form-urlencoded'\}

const service = axios.create({
      headers: {'content-type':'application/x-www-form-urlencoded'},
      timeout: 5000 // request timeout
    })

后台成功接收到数据。

转载于:https://www.cnblogs.com/yuyu97513/p/10954310.html