本地可以传大于1M的图片,连线上后无法上传,报错:Access-Control-Allow-Origin & 413 (Request Entity Too Large)

本地可以传大于1M的图片,连线上后无法上传,报错:Access-Control-Allow-Origin & 413 (Request Entity Too Large)

连线上的 ip 地址是可以上传的,但是小程序要求使用域名,而使用域名时就会报这个错

  • 使用域名时小于1M的居然还是可以成功传上去的,诡异得很

请添加图片描述

解决方案

nginx 配置 client_max_body_size 10M; (域名对应规则下面要配置)

  • 配置完记得重启 nginx 重新加载配置
# …… 其他的配置

http {
  include       mime.types;
  default_type  application/octet-stream;

  server {

    listen    9169 ssl;
    server_name  www.xxxx.com; # 自己替换 xxxx

    # ssl 的一些配置 start ↓ (具体怎么搞网上搜一下有教程)
    ssl_certificate      E:/xxxyyy/nginx-1.16.1/ssl/www.xxxx.com.pem; # 自己替换 xxxyyy xxxx
    ssl_certificate_key   E:/xxxyyy/nginx-1.16.1/ssl/www.xxxx.com.key; # 自己替换 xxxyyy xxxx
    ssl_session_cache    shared:SSL:1m;
    ssl_session_timeout  5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;  
    ssl_ciphers AESGCM:ALL:!DH:!xxx:!RC4:+HIGH:!xxxx:!LOW:!xxx:!xxx;  # 不知道这里有没有安全隐患,也随意替换了一些文本,请见谅
    ssl_prefer_server_ciphers   on;   
    # ssl 的一些配置 end ↑



    location / {
      root   html;
      index  index.html index.htm;
      try_files $uri $uri/ /index.html;

    }
    location ^~ /api/ {
      # !!!!!!!!!!↓ 关键配置 ↓ !!!!!!!!!!!!!!!!!!
      client_max_body_size 10M;
      # !!!!!!!!!!↓ 关键配置 ↑ !!!!!!!!!!!!!!!!!!
      
      # …… 其他的配置
    }
  }

感谢网友分享

413 Request Entity Too Large-CSDN博客

413 Request Entity Too Large_Bunny0212的博客-CSDN博客

上传文件返回413错误同时出现has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header… - 低调的小白 - 博客园 (cnblogs.com)


(微信小程序后台那边的是之前就配过了的,不是这个问题,参照本文还无法解决可以看看是不是这个原因,虽然这个原因的报错应该很明显)


(另一个坑)H5 可以上传图片,小程序上不行

本来这个问题也挺容易发现的,尴尬的是伴随着前面那个bug,bug 叠加,疑惑性上来了,没有意识到这里有问题

原因:需求层面限制了上传图片的类型,代码里是用 file.name 字符串后缀来判断的,但是 微信上文件对象结构不一样,取不到相关字段,所以就报错了

解决方案:判断一下数据对象,根据不同端取不同的字段去做判断,从而兼容两端


问题代码↓

请添加图片描述

同一张图片在微信开发者工具和浏览器开发者工具中打印出来的结果异同 ↓

微信开发者工具打印出来的文件对象 ↓

请添加图片描述

H5 在浏览器开发者工具打印出来的文件对象 ↓

请添加图片描述

显然,得根据不同的字段来做文件类型判断

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

RealizeInnerSelf丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值