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

2019-05-31 11:44:45 阅读：255 来源： 互联网

标签：Control qs Vue 所遇 request Axois Access Allow response

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

　　后台成功接收到数据。

标签：Control,qs,Vue,所遇,request,Axois,Access,Allow,response
来源： https://www.cnblogs.com/yuyu97513/p/10954310.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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