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

ethanYin
  • 125

最近项目上线公司服务器内测,我把自己项目放到公司服务器后,请求后端接口始终是status=0(vconsole打印的),我部署的域名是aa.bb.com,后端域名(接口地址)是ab.bb.com,就是域名前缀不同.
a28a5c3e96cafd766bebe083f5ae72b.jpg
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;
    } 
}
回复
阅读 8k
1 个回答
ethanYin
  • 125
✓ 已被采纳

页面要是在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跨域问题处理
十种跨域解决方案

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏