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

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
})

  后台成功接收到数据。

上一篇:axios请求数据报跨域错误的解决方法


下一篇:Vue向后端传数据后端接收为null的解决方法