Nginx配置跨域兼容IOS12 苹果手机请求程序报network error错误

最新推荐文章于 2025-06-23 14:00:42 发布

码农笔录

最新推荐文章于 2025-06-23 14:00:42 发布

阅读量3.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： linux nginx 跨域文章标签： nginx

本文链接：https://blog.csdn.net/yp090416/article/details/120669271

linux 同时被 3 个专栏收录

27 篇文章

订阅专栏

nginx

6 篇文章

订阅专栏

跨域

2 篇文章

订阅专栏

本文讲述了开发者在微信H5页面遇到网络error的问题，通过升级到HTTPS并调整跨域配置，特别是针对iOS12设备的适配，解决了大部分设备的报错问题。关键在于修改了Access-Control-Allow-Origin和Access-Control-Allow-Methods设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文更新链接 https://www.aiprose.com/blog/146

最近有用户反馈在使用微信H5页面的时候，一直提示network error错误，但是本身网络都是正常的，因为网页能正常打开。上网查了下，说后台接口要配置成为HTTPS的，于是我申请了一个ssl证书，通过错误收集软件查看，报错数量确实少了点，但是还是有很多设备报错。而且大部分是苹果ios 12系统。结果发现自己的跨域配置有问题。

默认的跨域配置如下：

    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Headers' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' '*';
    if ($request_method = 'OPTIONS') {
       return 200;
    }

后面改成如下配置就好了，这样就兼容ios 12了。


location / {
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  add_header Access-Control-Allow-Credentials true;

  #   表示允许这个域跨域调用（客户端发送请求的域名和端口）
  #   $http_origin动态获取请求客户端请求的域   不用*的原因是带cookie的请求不支持*号
  add_header Access-Control-Allow-Origin $http_origin;

  add_header 'Access-Control-Allow-Methods' '*';
  #   表示请求头的字段 动态获取
  add_header Access-Control-Allow-Headers $http_access_control_request_headers; 

  if ($request_method = 'OPTIONS') {    
      return 204;
  }
  proxy_pass http://waterpath;
}