Axios POST 在 iOS 上失败

Question

我正在尝试使用 Axios 从 domain1 到 domain2 执行简单的 ajax POST。 这是一个跨域的简单 POST，因此没有 PREFLIGHT (OPTIONS) 调用。 应用程序的响应是一个简单的 JSON 字符串。

在 Chrome、Android、Windows 和 iOS（不包括 iPhone）上，这可以正常工作。 但是在 Safari 和 Chrome 上的 iPhone 6、7、8+ 上，我在控制台中收到来自 axios 响应的错误。我可以看到 POST 请求到达 domain2 上的应用程序并发送了一个 json 响应。但这就是我在 axios.catch 中 console.log 响应时显示的内容。没有其他细节。

错误：网络错误

我的 POST 是一个包含以下请求标头的多部分/表单数据帖子：

Accept: application/json, text/plain, */*
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary81kouhSK7WgyVQZ3
Origin: https://domain1
Referer: https://domain1/test
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1

而表单数据只是 4 个文本字段

------WebKitFormBoundary81kouhSK7WgyVQZ3
Content-Disposition: form-data; name="a"
12345
------WebKitFormBoundary81kouhSK7WgyVQZ3
Content-Disposition: form-data; name="b"
asdfasf
------WebKitFormBoundary81kouhSK7WgyVQZ3
Content-Disposition: form-data; name="c"
asdfadsf
------WebKitFormBoundary81kouhSK7WgyVQZ3
Content-Disposition: form-data; name="d"
adfasdfa
------WebKitFormBoundary81kouhSK7WgyVQZ3--

当 POST 从 Windows 和 Mac 上的 Chrome（或 IE 和 Firefox）发送时，我得到以下响应标头和 HTTP 200：

access-control-allow-headers: Accept,Content-Type,Origin,Referer,User-Agent
access-control-allow-methods: GET, POST, PUT, DELETE, OPTIONS
access-control-allow-origin: *
cache-control: no-cache, private
content-type: application/json, text/plain, */*; charset=UTF-8
x-content-type-options: nosniff
x-ratelimit-limit: 60
x-ratelimit-remaining: 59
x-xss-protection: 1

我已在 domain2 的应用程序上明确设置（Laravel 5.8 应用程序 - 在中间件中设置 CORS 标头）。

但在 iPhone 上，Safari 和 Chrome（以及 Mac 上的 Safari 浏览器 - Chrome 可在 Mac 上运行）我没有看到任何响应 - conole.log(error) 显示（请参阅下面的 axios 代码）

错误：网络错误

在查看请求/响应的网络选项卡中，没有返回响应标头，也没有 HTTP 状态代码。仅显示请求标头。

我的axios代码如下：

axios.post('https://domain2/test', formData)           
    .then(function (response) {

        console.log("POST function of axios 1");
        console.log(response);
        console.log("POST function of axios 2");
    })
    .catch(function (error) {
        console.log("Error in catch of axios post");
        console.log(error);
        console.log("End error");
    });

formData 是使用 formData.append('a',12345) 等创建的...

我可以使用相同的 axios 代码成功 POST 到从 https://domain1 到 https://domain1 的测试上传，所以我相信来自 domain2 的响应标头存在一些 iOS 不喜欢的问题并终止响应。

我尝试设置/更改所有响应标头，在 Axios POST 上设置标头，尝试使用简单的 xhr 而不是 Axios 等，但无济于事...同样的错误。

有人指点吗？我已经用谷歌搜索了等等......但没有找到任何有帮助的东西。 甚至我如何从 iPhone 上的错误响应中获取更多信息？ 我正在 Mac 上调试 iPhone，所以可以看到 console.log 等...

非常感谢

Answer 1

原来这个错误是由于升级头 apache 在响应中设置的。 一旦我在 apache 配置中取消设置该标题，问题就在 iOS 上得到解决。 我在 apache 的虚拟主机中为域设置了以下内容，在目录部分

Header unset Upgrade

Answer 2

在info.plist 中添加 api 域解决了我的问题：

1. 打开 Xcode

2. 点击你的目标

3. 转到标签info (info.plist)

4. 找到App Transport Security Settings

5. 在其下添加一个新字段，并将其命名为Exception Domains（如果它不存在）

6. 在Exception Domains 下添加一个新字段并将其命名为YOUR_API_DOMAIN, e.g.: example.com

7. 将其类型更改为Dictionary

8. 在您的域名下添加一个新字段并将其命名为NSExceptionAllowsInsecureHTTPLoads

9. 将其类型更改为Boolean，并将其值指定为1（选择是）

10. 关闭 Metro bundler 终端并重建您的应用程序

为了更好地理解，请看这个截图：

Answer 3

移动设备和服务器是否在同一个网络上？ 使用服务器本地网络 IP 和端口而不是 https://domain2。用下面的服务器 IP 和端口替换我的示例 IP。

axios.post('http://10.0.0.12:8000/', formData)

我认为可能是移动设备抛出错误无法翻译 url https://domain1？

如果您使用服务器 IP，也请尝试删除 https。 https://stackoverflow.com/a/48843551/4993755 确保在您的服务器 cors 设置中启用了OPTIONS。