Servlet+Vue项目前后端交互问题汇总
前言:raw_json格式请求,Servlet、axios、postman分别如何处理?Servlet-Vue 如何解决跨域问题?
一、raw_json格式请求,Servlet、axios、postman分别如何处理
1.1、使用Vue axios发送raw_json格式的请求:
axios.post('/air/point/saveOrUpdate', JSON.stringify(params), {transformRequest: [function(data) {return data}],headers: {'Content-Type': 'application/json'}})
1.2、后端Servlet接收数据:以流的方式接收请求参数
1.2.1、工具类
import javax.servlet.http.HttpServletRequest;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;public class HttpUtil {public static String getRawJson(HttpServletRequest request) {BufferedReader br = null;try {br = new BufferedReader(new InputStreamReader(request.getInputStream(), "UTF-8"));} catch (IOException e) {e.printStackTrace();return "";}String line = null;StringBuilder sb = new StringBuilder();try {while ((line = br.readLine()) != null) {sb.append(line);}br.close();} catch (IOException e) {e.printStackTrace();return "";}return sb.toString();}
}
1.2.2、Servlet调用
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String method = request.getParameter("method");System.out.println(method);String json = HttpUtil.getRawJson(request);System.out.println(json);
}
1.3、POSTMAN测试
二、配置跨域
2.1、配置后端跨域
2.1.1、具体的Servlet方法里设置
//解决跨域问题
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type");
response.setHeader("Access-Control-Allow-Credentials", "true");
//返回数据时指定编码格式:utf-8
response.setContentType("application/json;charset=utf-8");
response.setCharacterEncoding("UTF-8");
2.1.2、配置全局过滤器
2.1.2.1、新建过滤器类
import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;/* 使用Servlet过滤器* 解决跨域和中文编码问题*/public class CorsFilter implements Filter {@Overridepublic void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {HttpServletResponse response = (HttpServletResponse) res;//解决跨域问题response.setHeader("Access-Control-Allow-Origin", "*");response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");response.setHeader("Access-Control-Max-Age", "3600");response.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type");response.setHeader("Access-Control-Allow-Credentials", "true");//返回数据时指定编码格式:utf-8response.setContentType("application/json;charset=utf-8");response.setCharacterEncoding("UTF-8");chain.doFilter(req, res);}public void init(FilterConfig filterConfig) {}public void destroy() {}
}
2.1.2.2、web.xml配置过滤器
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"version="4.0"><filter><filter-name>cors</filter-name><filter-class>com.jagger.cms_javaweb.config.CorsFilter</filter-class></filter><filter-mapping><filter-name>cors</filter-name><url-pattern>/*</url-pattern></filter-mapping>
</web-app>
2.2、配置前端跨域
2.2.1、进入vue项目,找到vue.config.js文件
如果不存在vue.config.js文件就新建,并设置如下内容
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true ,lintOnSave: false,devServer: {proxy: {'^/api': {target: 'http://localhost:9000/',//接口的前缀ws:true,//代理websockedchangeOrigin:true,//虚拟的站点需要更管originpathRewrite:{'^/api':''//重写路径}}}}
})
备注:axios请求照常编写就行
备注:raw对应springboot请求注解【@RequestBody】