浏览器异常：TypeError

问题描述

封装好的request.js：

import axios from 'axios'

export function request(config) {
  // 1.创建axios的实例
  const instance = axios.create({
    baseURL: 'http://127.0.0.1:8181',
    timeout: 5000
  })

  // 2.axios的拦截器
  // 2.1.请求拦截的作用
  instance.interceptors.request.use(config => {
    return config
  }, err => {
    console.log(err);
  })

  // 2.2.响应拦截
  instance.interceptors.response.use(res => {
    // console.log(res);
    return res.data
  }, err => {
    console.log(err);
  })

  // 3.发送真正的网络请求
  return instance(config)
}

axios发送请求代码：

import {request} from "@/network/request";
export default {
  name: "Blogs",
  data() {
    return {
      currentPage: 1,
      total: 0,
      size: 4,
      pages: 0,
      blogs: []
    }
  },
  methods: {
    getBlogs(currentPage, size) {
      request({
        url: '/getBlogs?currentPage=' + currentPage + '&size=' + size
      }).then(res =>{
          this.total = res.data.data.total
          this.size = res.data.data.size
          this.pages = res.data.data.pages
          this.blogs = res.data.data.records
        // console.log(this)
      })
    },
  },

解决思路

起初我以为是total这个属性读取不到，将this赋值给_this，在request里再使用 _this.total访问，还是报错；
于是去百度，看到别人报这个错是因为使用Vue.use(axios)，改为原型全局注册后就不报错了：Vue.prototype.$http = axios
因为暂时想不出解决方法，所以我放弃使用封装的request.js，改用下面这种方法来使用axios：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'

Vue.prototype.$http = axios
axios.defaults.baseURL = 'http://localhost:8181'
axios.defaults.withCredentials = true

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

this.$http.get('http://localhost:8181/blogs'
).then(res => {
  console.log(res)
})

项目完成结束后，我回来重新测试这个问题，发现是我axios的拦截器响应拦截后给我返回的是只有数据部分：return res.data；所以要赋值的话应为：this.total = res.data.total
所以在使用axios的拦截器时，应注意放行拦截结果： return config 和 return res

请求400

问题描述

后端：

前端：

data() {
  return {
    ruleForm: {
      username: '',
      password: '',
    }
  };
},
methods: {
  submitForm(formName) {
    this.$refs[formName].validate((valid) => {
      if (valid) {
        this.$http.post('/login', this.ruleForm).then((res) => {

登录页面提交表单后：

解决方法

可以看到图中的Content-Type：application/json

如果前端传入的是json数据（Content-Type：application/json），那么后端使用@RequestBody HashMap<String, String> map或者@RequestBody User user进行接收。
如果前端传入的是简单类型数据（Content-Type：application/x-www-form-urlencoded），那么后端可以使用@RequestParam("id") String id。

spring boot一些注解的详解

跨域与拦截器导致跨域失败

拦截器和跨域的配置代码

package top.nanzx.blog.config;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import top.nanzx.blog.entity.Admin;
import top.nanzx.blog.service.AdminService;

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@Component
public class AdminLoginInterceptor implements HandlerInterceptor {

    @Autowired
    AdminService adminService;

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        Cookie[] cookies = request.getCookies();
        Admin admin = adminService.getOne(new QueryWrapper<Admin>().eq("id", 1));
        String token = admin.getToken();
        for (Cookie c : cookies) {
            if (c.getName().equals("token")) {
                return token.equals(c.getValue());
            }
        }
        return false;
    }
}

package top.nanzx.blog.config;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class Config implements WebMvcConfigurer {

    @Autowired
    AdminLoginInterceptor adminLoginInterceptor;


    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("GET", "POST", "HEAD", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true).allowedOrigins()
                .maxAge(3600)
                .allowedHeaders("*");
    }

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(adminLoginInterceptor).excludePathPatterns("/getBlogs","/getBlog/*","/login","/getAdminMess");
    }

}

产生问题

非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为”预检”请求（preflight）。
浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。
预检请求用的请求方法是OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是Origin，表示请求来自哪个源。

在非简单请求的时候，总是报跨域访问的错误：

预检请求被拦截器拦截后，服务器端没有给浏览器返回必要的跨域指示信息，浏览器没收到指示信息就认为服务器不允许跨域请求，就会报错。

解决

拦截器截取到请求时先进行判断，如果是option请求的话，则放行：

package top.nanzx.blog.config;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import top.nanzx.blog.entity.Admin;
import top.nanzx.blog.service.AdminService;

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@Component
public class AdminLoginInterceptor implements HandlerInterceptor {

    @Autowired
    AdminService adminService;

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        if("OPTIONS".equals(request.getMethod().toUpperCase())) {
            System.err.println("OP:OK");
            return true;
        }

        Cookie[] cookies = request.getCookies();
        Admin admin = adminService.getOne(new QueryWrapper<Admin>().eq("id", 1));
        String token = admin.getToken();
        for (Cookie c : cookies) {
            if (c.getName().equals("token")) {
                return token.equals(c.getValue());
            }
        }
        return false;
    }
}

参考文章：跨域与拦截器导致跨域失败

response响应异常

1	java.lang.IllegalStateException: Cannot call sendError() after the response has been committed

下载文件接口如下：

/**
    * @Author: Nan
    * @Param: [courseId, fileName, response]
    * @Return: top.nanzx.dto.JsonResult
    * @Date: 12:38 2021/2/14
    * @Description: 下载文件接口
    */
   @Override
   public JsonResult download(int courseId, String fileName, HttpServletResponse response) {
       Means means = meansDao.queryFile(fileName, courseId);
       File file = new File(means.getFilePath() +'\\'+ means.getFileName());

       if (!file.exists()) {
           return new JsonResult(1, "文件不存在！", null);
       }
       response.setContentType("application/force-download");
       response.addHeader("Content-Disposition", "attachment;fileName=" +  new String(fileName.getBytes(StandardCharsets.UTF_8), Charset.forName("ISO8859-1")));

       byte[] buffer = new byte[1024];
       try {
           FileInputStream fis = new FileInputStream(file);
           BufferedInputStream bis = new BufferedInputStream(fis);

           OutputStream os = response.getOutputStream();

           int i = bis.read(buffer);
           while (i != -1) {
               os.write(buffer, 0, i);
               i = bis.read(buffer);
           }
           fis.close();
       } catch (Exception e) {
           e.printStackTrace();
           return new JsonResult(1, "文件下载失败。", null);
       }
       return new JsonResult(0, "文件下载成功。", null);
   }

出现这个错误，应该是多次response导致的，可以这么理解，http server发送response后就关闭了socket，这个时候再次发送response给http client就会出现这个问题。而我代码中传输完文件后，流一关闭，socket也就关闭了。

解决办法：如果下载出现问题，返回 JsonResult 让前台知道问题详情，下载成功的话，直接return null 就Ok了。

修改代码：

/**
     * @Author: Nan
     * @Param: [courseId, fileName, response]
     * @Return: top.nanzx.dto.JsonResult
     * @Date: 12:38 2021/2/14
     * @Description: 下载文件接口
     */
    @Override
    public JsonResult download(int courseId, String fileName, HttpServletResponse response) {
        Means means = meansDao.queryFile(fileName, courseId);
        File file = new File(means.getFilePath() +'\\'+ means.getFileName());

        if (!file.exists()) {
            return new JsonResult(1, "文件不存在！", null);
        }
        response.setContentType("application/force-download");
        response.addHeader("Content-Disposition", "attachment;fileName=" +  new String(fileName.getBytes(StandardCharsets.UTF_8), Charset.forName("ISO8859-1")));

        byte[] buffer = new byte[1024];
        try {
            FileInputStream fis = new FileInputStream(file);
            BufferedInputStream bis = new BufferedInputStream(fis);

            OutputStream os = response.getOutputStream();

            int i = bis.read(buffer);
            while (i != -1) {
                os.write(buffer, 0, i);
                i = bis.read(buffer);
            }
            fis.close();
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResult(1, "文件下载失败。", null);
        }
        return null;
    }

前端Json数据解析异常

Resolved [org.springframework.http.converter.HttpMessageNotReadableException: 
    JSON parse error: Cannot deserialize instance of `java.lang.String` out of START_ARRAY token; 
    nested exception is com.fasterxml.jackson.databind.exc.MismatchedInputException: Cannot deserialize instance of `java.lang.String` out of START_ARRAY token
 at [Source: (PushbackInputStream); line: 1, column: 101] (through reference chain: java.util.HashMap["object"])]

出错原因：前端传值类型与后端接收值的类型不一致，无法解析

这是我前端传输的数据：

<script>
export default {
    data() {
        return {
          ruleForm: {
            courseName: '',
            classes: [],
          },
        }
    }
}

这是我后端对应的接口：

@PostMapping("/createCourse")
public JsonResult createCourse(@RequestBody HashMap<String, String> map) {
    return teacherService.createCourse(map);
}

前端数组类型，后端无法用string类型接收。

解决方法：

前端=>后端：

//格式化数组--转字符串
this.tag = this.tag.join(',');
后端=>前端：

//格式化字符串--转数组
for(var i in data){
  if(data[i].tag!==""){
    data[i].tag = data[i].tag.split(',');
  }
}

项目代码解决：

<script>
export default {
  name: "AddCourse",
  data() {
    return {
      ruleForm: {
        courseName: '',
        classes: [],
      },
    };
  },
  computed: {
    formData() {
      return {
        courseName: this.ruleForm.courseName,
        classes: this.ruleForm.classes.join(','),
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.post('/teacher/createCourse', this.formData).then((res) => {
              ...
}
</script>

String格式转JSON格式输出到文本

class JsonTool {
    //是否采用制表符
    private final boolean isTab = false;

    public String stringToJSON(String strJson) {
        //换行多少个退位
        int tabNum = 0;
        StringBuilder jsonFormat = new StringBuilder();
        int length = strJson.length();
        for (int i = 0; i < length; i++) {
            char c = strJson.charAt(i);
            if (c == '{') {
                tabNum++;
                jsonFormat.append(c).append("\n");
                jsonFormat.append(getSpaceOrTab(tabNum));
            } else if (c == '}') {
                tabNum--;
                jsonFormat.append("\n");
                jsonFormat.append(getSpaceOrTab(tabNum));
                jsonFormat.append(c);
            } else if (c == ',') {
                jsonFormat.append(c).append("\n");
                jsonFormat.append(getSpaceOrTab(tabNum));
            } else if ((c == ':' && strJson.charAt(i - 1) == '"' && strJson.charAt(i + 1) == '"')
                    || (c == ':' && strJson.charAt(i + 1) == '[')
                    || (c == ':' && strJson.charAt(i + 1) == '{')
                    || (c == ':' && Character.isDigit(strJson.charAt(i + 1)) && strJson.charAt(i - 1) == '"')) {
                jsonFormat.append(c);
                jsonFormat.append(" ");
            } else if (c == '[' && strJson.charAt(i + 1) != ']') {
                tabNum++;
                jsonFormat.append(c).append("\n");
                jsonFormat.append(getSpaceOrTab(tabNum));
            } else if (c == ']' && strJson.charAt(i - 1) == '"') {
                tabNum--;
                jsonFormat.append("\n");
                jsonFormat.append(getSpaceOrTab(tabNum));
                jsonFormat.append(c);
            } else {
                jsonFormat.append(c);
            }
        }
        return jsonFormat.toString();
    }


    /**
     * @Description:追加换行后的退格
     * @Param: [tabNum]
     * @Return: java.lang.String
     * @author: Nan-ZN.Xu@qq.com
     * @date: 6/9/2021
     * @Time: 3:01 PM
     */
    public String getSpaceOrTab(int tabNum) {
        StringBuilder sbTab = new StringBuilder();
        for (int i = 0; i < tabNum; i++) {
            if (isTab) {
                sbTab.append('\t');
            } else {
                sbTab.append("  ");
            }
        }
        return sbTab.toString();
    }
}

将DTO保存到指定路径

/**
  * @Description:调用API接口并将参数和返回结果等封装成DTO保存到指定路径
  * @Param: [method, url, params, filePath]
  * @Return: boolean
  * @author: Nan-ZN.Xu@qq.com
  * @date: 6/8/2021
  * @Time: 2:18 PM
  */
 public static boolean requestAndSave(String method, String url, Map<String, String> params, String filePath) {
     boolean flag = false;

     ApiRequest apiRequest;//详见另一篇博客（HttpClient的使用）的封装
     try {
         apiRequest = request(method, url, params);//详见另一篇博客（HttpClient的使用）的封装
     } catch (Exception e) {
         e.printStackTrace();
         return false;
     }

     //获取接口名
     String[] urlStrings = url.split("/");
     String interfaceName = urlStrings[urlStrings.length - 1];
     //获取当前时间
     Date date = new Date();
     SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMddHHmmss");
     String dataTime = formatter.format(date);
     //设置文件保存路径以及文件名
     filePath = filePath + "\\" + interfaceName + "-" + dataTime + ".json";

     FileOutputStream fileOutputStream;
     OutputStreamWriter outputStreamWriter;
     BufferedWriter bufferedWriter = null;
     try {
         File file = new File(filePath);
         if (!file.getParentFile().exists()) {
             flag = file.getParentFile().mkdirs();
         }
         if (file.exists()) {
             flag = file.delete();
         }

         //利用JsonTool工具(上文)将DTO对象转为json格式输出到文本
         String ojString = JSONObject.toJSONString(apiRequest);
         JsonTool tool = new JsonTool();
         String text = tool.stringToJSON(ojString);

         //利用流写入文件
         fileOutputStream = new FileOutputStream(file);
         outputStreamWriter = new OutputStreamWriter(fileOutputStream, CHARSET);
         bufferedWriter = new BufferedWriter(outputStreamWriter);

         bufferedWriter.write(text);
     } catch (Exception e) {
         flag = false;
         e.printStackTrace();
     } finally {
         //关闭资源
         if (bufferedWriter != null) {
             try {
                 bufferedWriter.flush();
                 bufferedWriter.close();
             } catch (IOException e) {
                 e.printStackTrace();
             }
         }
     }
     return flag;
 }

从JSON文件中读取json并转换成DTO

/**
     * @Description:从JSON文件中读取json并转换成DTO对象
     * @Param: [filePath]
     * @Return: qq.cn.oeServiceCommon.dto.ApiRequest
     * @author: Nan-ZN.Xu@qq.com
     * @date: 6/8/2021
     * @Time: 5:28 PM
     */
    public static ApiRequest readFromJsonFile(String filePath) {
        ApiRequest apiRequest;//详见另一篇博客（HttpClient的使用）的封装

        File file = new File(filePath);
        if (!file.exists()) {
            return null;
        }

        String jsonStr = null;

        FileInputStream fis;
        BufferedInputStream bis = null;
        try {
            fis = new FileInputStream(file);
            bis = new BufferedInputStream(fis);

            int ch;
            StringBuilder str = new StringBuilder();
            while ((ch = bis.read()) != -1) {
                str.append((char) ch);
            }

            jsonStr = str.toString();
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if (bis != null) {
                try {
                    bis.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
        //将JSON文本串转为对象
        apiRequest = JSONArray.parseObject(jsonStr, ApiRequest.class);
        return apiRequest;
    }

将请求结果封装成指定DTO


public static <T> T getResultDto(String method, String url, Map<String, String> params, Class<T> clazz) {
    ApiRequest apiRequest;//详见另一篇博客（HttpClient的使用）的封装
    try {
        apiRequest = request(method, url, params);
    } catch (Exception e) {
        e.printStackTrace();
        return null;
    }
    Object result = apiRequest.getResult();
    String jsonString = JSON.toJSONString(result);
    return JSONObject.parseObject(jsonString, clazz);
}