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