상태가 200이고 응답이 있어도 Axios POST는 "Network Error"를 반환한다.

상태가 200이고 응답이 있어도 Axios POST는 "Network Error"를 반환한다.

이 질문에는 이미 답변이 있습니다.

XMLHttpRequest가 XXX를 로드할 수 없음 'Access-Control-Allow-Origin' 헤더가 없음 (11개의 답변)

닫힘3년 전.

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" 파라미터도 사용하지 않고 시도했습니다.하지만 어획에 들어갈 때마다 다음과 같은 메시지가 나타납니다.오류: 네트워크 오류

브라우저의 [Network]탭에 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).

우체국에서도 같은 전화를 걸려고 했는데 잘 되더라고요.차이점은 Axios가 내 localhost:8080과 함께 "Origin"과 "Referrer"라는 헤더를 전송하고 있다는 것입니다.이것은 내가 호출하는 API URL과는 다릅니다.

어떻게 하면 이 에러를 받지 않고 Axi에서 이 콜을 발신할 수 있을까요?고마워요.

편집

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;
        }

생성된 포스트맨 콜을 복사 붙여넣고 다른 페이지에서 시도해보니 잘 작동합니다.CORS 문제가 아니라 Javascript 통화에 문제가 있습니다.

API에서 CORS를 활성화해야 하는데 어떤 언어/프레임워크를 사용하고 있습니까?

다음은 참고 자료입니다.

https://enable-cors.org/

언급URL : https://stackoverflow.com/questions/53044553/axios-post-returns-network-error-even-if-status-is-200-and-theres-a-response