Servlet+Vue项目前后端交互问题汇总

2023-06-19 199

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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 {
    @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':''//重写路径
        }
      }
    }
  }
})