前端学习

前端学习

@色少1年前

05/7
10:40
前端技能 日常开发记录

vue+post请求导出excel

色少 撰写 无回复

最近有些奇奇怪怪的需求。比如后端没读法取服务器权限因此没法做到文件导出或者利用oss导出(公司没钱)。导致导出的时传文件流给前端让前端获取。最奇怪是居然不用get用post说是文件过大怕前端接收不全。。这什么扯淡玩意。。get只是浏览器对url长度做了限制罢了。
算了遇到这么弱的后端你只能配合没法子。唯一用blob的好处就是防止盗链和可以加密。自我安慰吧。
因此产生了如何在封装了http请求里面利用axios获取文件流导出excel？
下面上代码
重点：responseType: ‘blob’

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const axiosReq = (url, params) => {
  axios
    .post(url, params, {
      responseType: "blob",
      headers: { "Content-Type": "application/json" }
    })
    .then(res => {
      console.log(res, "axios");
      const blob = new Blob([res.data], {
        type: "application/zip;"
      });
      const downloadElement = document.createElement("a");
      const href = window.URL.createObjectURL(blob);
      const filename = res.headers["content-disposition"]
        .split(";")[1]
        .split("=")[1]; //filename;
      downloadElement.href = href;
      downloadElement.download = filename; //命名下载名称
      downloadElement.click();
      window.URL.revokeObjectURL(href); //下载完成进行释放
    })
    .catch(e => {
      ElMessage.error(e.message);
    });
};

vue+post请求导出excel

@色少1年前

03/17
09:45
前端技能 日常开发记录 服务器端知识

当Axios跨域请求遇上request⾃定义headers之错误排坑

色少 撰写 无回复

坑之背景：
ERP项⽬中不同⻚⾯请求同⼀个接⼝/trace/item/staff/list（只有线上有此接⼝，其他灰度没发，直接请求到这
⾥， ⼀个字，⽆语）参数⼀致， 服务端配置⼀致

1、商品操作⽇志
使⽤jQuery 的$.ajax的⽅式请求， 响应正常

2、交易 –> 发货⽐例 –> 变更记录
使⽤axios.get⽅式，就⼀直报错，⼀直报错，⼀直报错，Network
Erorr

坑之分析：
为什么相同的相同的请求，不同的⽅式，结果会不⼀样？这个时候去怀疑后端配置不对，显然有点耍⽆赖。没有办法，冷静下来想想， axios
请求⽅式有问题， 那⼀定是它做了什么不为⼈知的事情，那我们从这个往下查。

#1. 由于ERP特定要求， 前端请求会去改写请求头，在header⾥⾯添
就是这个操作会导致触发Request Method为OPTIONS的预检请求
（preflight）。⽽$.ajax是不会触发这个动作。后端该请求的Allow-
Method⾥⾯不⽀持OPTIONS⽅式，就出现了上图中的预检请求不通过
详⻅：https://www.jb51.net/article/193303.htm

#2. 让ERP后端这个接⼝⽀持OPTIONS⽅式，然后再测再报错

#3. ngnix跨域设置没有加域名，添加跨域域名，再测再报错

原来preflight请求还要校验请求头， 那就让后端加上呗。nginx⾥⾯加或后端代码⾥⾯加，之⼀即可
Access-Control-Allow-Headers 添加CompanyId,TrackId

#4. 然后就没有然后了， 请求终于通了。。。。

总结： 要解决此类问题拢共分三步(某个特定请求级别)
1. Allow-Method 允许 OPTIONS⽅式
2. Access-Control-Allow-Origin 对其他各灰度环境开放
3. Access-Control-Allow-Headers 添加CompanyId,TrackId等需要
允许通过的字段

当Axios跨域请求遇上request⾃定义headers之错误排坑