前言: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 { @Override public 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-8 response.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,//代理websocked changeOrigin:true,//虚拟的站点需要更管origin pathRewrite:{ '^/api':''//重写路径 } } } } })
备注:axios请求照常编写就行
备注:raw对应springboot请求注解【@RequestBody】