h5(混ios,vue)页面上线后请求为status=0(network error)

Question

最近项目上线公司服务器内测，我把自己项目放到公司服务器后，请求后端接口始终是status=0(vconsole打印的)，我部署的域名是aa.bb.com,后端域名（接口地址）是ab.bb.com，就是域名前缀不同.

ios那边把webview的url都和请求地址都相应改为了线上，我的页面时出来的（说明部署成功），就是请求有问题(如上)，

用postwoman和本地开发配置的代理测试后台线上接口是通的。

我的nginx配置如下，不知道如何解决这个跨域请求

 server {
    listen 80;

    server_name aa.bb.com;

    location / {
        root /usr/local/Pmh5_test/ios_h5;

        #for vue-Router history
        try_files $uri $uri/ /index.html;
        index index.html;
    } 
}

Answer 1

页面要是在android或者网页里请求都是可以的，唯独ios不行，奇怪？
主要ios的safari内核的问题，如果服务端设置了

Access-Control-Allow-Headers : "*"

ios12.x是不支持的，我的是ios13.5也不支持！（胆子大升级到了最新版，建议大家别升级）

详见github issue#1598

我们后端用的nginx配置，，后端在配置上ctrl v了如下代码：

location / {

  #以下为新增配置

  #   预检命令的缓存，如果不缓存每次会发送两次请求
  add_header Access-Control-Max-Age 3600;
  #   带cookie请求需要加上这个字段，并设置为true
  add_header Access-Control-Allow-Credentials true;

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

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

  #   OPTIONS预检命令，预检命令通过时才发送请求
  #   检查请求的类型是不是预检命令
  if ($request_method = OPTIONS){
      return 200;
  }
        
  #其他配置....

}

我曾尝试修改过该配置有没有多余的配置，一行没有！然后
nginx重启
请求就成功了

当然你也可能是其他情况，把它变为简单请求试一下

1. 安装qs模块，将发送的数据序列化，qs.stringify(data)
2. 然后添加axios配置
{
  headers: {
     'Content-Type': 'application/x-www-form-urlencoded'
  }
}

---

2020.08.26更新

需求为正式账户一个接口(https),体验账号一个接口(ttp)

除了以上原因导致status=0，还有可能是如下原因：

• https的网页向http请求（http向https请求可以） 参考]

这是ios12+中WKwebview的问题供[参考]，这种情况会导致你的请求发不出去，错误很难定位。

最后我的解决方法是将网页地址部署在http上。

---

另外推荐相关文章：
ios跨域问题处理
十种跨域解决方案