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

Posted 2021-12-13 yuyu97513

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:interceptor></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
})

　　后台成功接收到数据。