即使状态为 200 并且有响应，Axios POST也会返回“网络错误”

Question

我正在使用 Vue JS 2.5 和 Axios：

\n\n

"vue": "^2.5.17",\n"vue-axios": "^2.1.4",\n"axios": "^0.18.0",\n

\n\n

我正在尝试像这样进行 POST 调用：

\n\n

const data = querystring.stringify({\n                \'email\': email,\n                \'password\': password,\n                \'crossDomain\': true, //optional, added by me to test if it helps but it doesn\'t help\n            });\n\nvar axiosConfig = {\n                    headers: {\n                        \'Content-Type\': \'application/x-www-form-urlencoded\',\n                        // "Access-Control-Allow-Origin": "*",\n                        \'Accept\': \'*\',\n                    }\n                };\n\naxios.post(url, data, axiosConfig)\n                .then((response) => {\n                    console.log(\'response\');\n                    console.log(response);\n                })\n                .catch((error) => {\n                    console.log(\'error\');\n                    console.log(error);\n                });\n

\n\n

我也尝试过不使用“axiosConfig”参数。但每次它进入捕获时，都会显示以下消息：错误：网络错误

\n\n

在浏览器的“网络”选项卡中，我得到 200 状态和良好的响应（带有有效的 json），它基本上可以工作，但 Axios 返回错误并且没有响应。

\n\n

控制台还输出此警告：Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://url/api/page. (Reason: CORS header \xe2\x80\x98Access-Control-Allow-Origin\xe2\x80\x99 missing).

\n\n

我尝试从邮递员那里拨打同样的电话，效果很好。不同之处在于，Axios 使用我的 localhost:8080 发送标头：“Origin”和“Referrer”，这与我调用的 API url 不同。

\n\n

如何从 axios 进行此调用而不会出现此错误？谢谢。

\n\n

编辑

\n\n

如果我使用 PHP，它可以工作：

\n\n

$curl = curl_init();\n\n        curl_setopt_array($curl, array(\n            CURLOPT_URL => "https://myurl",\n            CURLOPT_RETURNTRANSFER => true,\n            CURLOPT_ENCODING => "",\n            CURLOPT_MAXREDIRS => 10,\n            CURLOPT_TIMEOUT => 30,\n            CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,\n            CURLOPT_CUSTOMREQUEST => "POST",\n            CURLOPT_POSTFIELDS => "------WebKitFormBoundaryTrZu0gW\\r\\nContent-Disposition: form-data; name=\\"email\\"\\r\\n\\r\\nemail\\r\\n------WebKitFormBoundaryTrZu0gW\\r\\nContent-Disposition: form-data; name=\\"password\\"\\r\\n\\r\\npassword\\r\\n------WebKitFormBoundaryTrZu0gW--",\n            CURLOPT_HTTPHEADER => array(\n                "Postman-Token: 62ad07e5",\n                "cache-control: no-cache",\n                "content-type: multipart/form-data; boundary=----WebKitFormBoundaryTrZu0gW",\n                "email: email",\n                "password: password"\n            ),\n        ));\n\n        $response = curl_exec($curl);\n        $err = curl_error($curl);\n\n        curl_close($curl);\n\n        if ($err) {\n            echo "cURL Error #:" . $err;\n        } else {\n            echo $response;\n        }\n

\n\n

我只是复制粘贴生成的 Postman 调用并从不同的页面尝试它，效果很好。所以这不是 CORS 问题，这是我的 Javascript 调用的问题。

\n

Answer 1

您需要在 API 上启用 CORS，您使用哪种语言/框架？

这里有一些参考：

https://enable-cors.org/