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 })
后台成功接收到数据。