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

Question

我正在使用带有 Axios 的 Vue JS 2.5：

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

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

const data = querystring.stringify({
                'email': email,
                'password': password,
                'crossDomain': true, //optional, added by me to test if it helps but it doesn't help
            });

var axiosConfig = {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        // "Access-Control-Allow-Origin": "*",
                        'Accept': '*',
                    }
                };

axios.post(url, data, axiosConfig)
                .then((response) => {
                    console.log('response');
                    console.log(response);
                })
                .catch((error) => {
                    console.log('error');
                    console.log(error);
                });

我也试过没有“axiosConfig”参数。但每次它进入捕获时，都会显示以下消息：Error: Network Error

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

控制台也输出此警告：Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://url/api/page. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

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

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

编辑

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

$curl = curl_init();

        curl_setopt_array($curl, array(
            CURLOPT_URL => "https://myurl",
            CURLOPT_RETURNTRANSFER => true,
            CURLOPT_ENCODING => "",
            CURLOPT_MAXREDIRS => 10,
            CURLOPT_TIMEOUT => 30,
            CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
            CURLOPT_CUSTOMREQUEST => "POST",
            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--",
            CURLOPT_HTTPHEADER => array(
                "Postman-Token: 62ad07e5",
                "cache-control: no-cache",
                "content-type: multipart/form-data; boundary=----WebKitFormBoundaryTrZu0gW",
                "email: email",
                "password: password"
            ),
        ));

        $response = curl_exec($curl);
        $err = curl_error($curl);

        curl_close($curl);

        if ($err) {
            echo "cURL Error #:" . $err;
        } else {
            echo $response;
        }

我只是复制粘贴了生成的 Postman 调用，然后从另一个页面尝试了它，它运行良好。所以这不是 CORS 问题，而是我的 Javascript 调用的问题。

Answer 1

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

这里有一些参考：

https://enable-cors.org/