대응: Axios 네트워크 오류

대응: Axios 네트워크 오류

악시를 처음 사용하는데 오류가 발생했습니다.

  axios.get(
    `http://someurl.com/page1?param1=1&param2=${param2_id}`
  )
  .then(function(response) {
    alert();
  })
  .catch(function(error) {
    console.log(error);
  });

올바른 URL과 파라미터를 사용하면 네트워크 요구를 체크할 때 서버에서 올바른 답변을 얻을 수 있지만 콘솔을 열면 콜백이 호출되지 않고 오류가 발생합니다.

오류: 네트워크 오류 스택 트레이스: createError@http://localhost:3000/static/js/bundle.js:2188:15 handleError@http:/localhost:3000/static/js/bundle.js:17:14

노드를 사용하여 API를 작성하는 경우JS

---

Your Express app needs to use CORS (Cross-Origin Resource Sharing). Add the following to your server file:

// This should already be declared in your API file
var app = express();

// ADD THIS
var cors = require('cors');
app.use(cors());

CORS에 대한 자세한 내용은 CORS에 관한 Mozilla 문서를 참조하십시오.

내 문제는 내가 요청한 URL에 관한 것이었다.삽입하지 않았습니다.http://를 참조해 주세요.제 말은, 제가 요청했던 URL은 다음과 같습니다.92.920.920.920/api/Token대신http://92.920.920.920/api/Token추가http://내 문제를 해결했다.

localhost에서 작업할 때 http:// 추가를 잊어버렸을 때 발생합니다.

잘못된 사용법

  const headers = {
    "Content-Type": "application/json",
    Authorization: apiKey,
  };
  const url = "localhost:5000/api/expenses/get-expenses";

  axios.get(url, { headers });

  // NETWORK ERROR

정답은요.

  const headers = {
    "Content-Type": "application/json",
    Authorization: apiKey,
  };
  const url = "http://localhost:5000/api/expenses/get-expenses";

  axios.get(url, { headers });

  // WORKS FINE IF YOU HANDLED CORS CORRECTLY IN THE SERVER SIDE

@jacobhobson의 답변 외에 몇 가지 파라미터를 사용하여 작업을 수행했습니다.

app.use(cors({origin: true, credentials: true}));

디지털 오션 액적 제작에 대해서도 같은 문제가 있었습니다.리액트에서는 악리를 사용하고 있었습니다.JS가 Node.js API를 호출합니다.

코르스도 포함시켰지만

const cors = require('cors');
app.use(cors());

하지만 난 여전히 더해야 했다

res.header( "Access-Control-Allow-Origin" );

컨트롤러를 호출하기 전에.그리고 나한테도 효과가 있었어거기서 나는 코르스가 제대로 작동하지 않는다는 것을 깨달았다.그래서 언인스톨을 하고 나서 다시 인스톨 하면, 동작합니다!

완전한 코드가 여기 있습니다.

그럼 다음 중 하나를 사용하든지

 app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  res.header("Access-Control-Allow-Headers", "x-access-token, Origin, X-Requested-With, Content-Type, Accept");
  next();
});

또는 사용

app.use(cors());

마찬가지다.

이미지를 서버에 업로드 하려고 했을 때, axios 0.27.2의 네트워크 에러가 발생했습니다.아래와 같이 헤더를 설정하면 에러가 발생하지 않습니다.

headers:{"Accept":"application/json, text/plain, /","Content-Type": "multipart/form-data"}

그리고 폼 데이터인지 x-ww-form-urlencoded인지 등 API 요청의 바디 타입을 컬렉션에서 확인해야 합니다.

저 같은 경우에는 http가 아닌 https를 사용했는데 그것도 체크해주세요.

에서 동일한 포트 번호가 설정되어 있는지 확인합니다.cors({ origin : [ "http://localhost:3001"]})및 그.env파일.

이것은, restrict-origin-when-cross-origin 정책에 의해서 발생합니다.브라우저는 리소스를 공유할 API 서버를 확인하는 사전 요청을 보냅니다.따라서 API 서버에서 오리진을 설정하고 상태를 전송해야 합니다.그 후 브라우저는 API 서버로 요청을 전송할 수 있습니다.

여기 암호가 있습니다.localhost:8000에서 프런트엔드를 실행하고 포트 6000에서 api 서버를 실행하고 있습니다.

const cors = require("cors");

app.options("*", cors({ origin: 'http://localhost:8000', optionsSuccessStatus: 200 }));

app.use(cors({ origin: "http://localhost:8000", optionsSuccessStatus: 200 }));

origin을 프런트엔드 URL로 설정했습니다.이 origin을 true로 설정하면 포트 8000만이 rosource에 액세스할 수 있으며 포트 8000에서 실행되고 있는 프론트엔드에서는 이 리소스에 액세스할 수 없습니다.api 서버에서 라우팅하기 전에 이 미들웨어를 사용합니다.

이 헤더를 추가하여 문제를 해결했습니다.

var data = new FormData();
              data.append('request', 'CompaniesData');
           var config = {
                 method: 'post',
                 url: baseUrl, headers:{"Accept":"application/json, text/plain, /","Content-Type": "multipart/form-data"},
                    data : data
                  };
            
                 axios(config)
    .then(function (response) {
      console.log(JSON.stringify(response.data));
    })
    .catch(function (error) {
      console.log(error);
    });

리액트 브라우저의 악시를 안드로이드로, .net을 백엔드로 사용하고 있습니다만, 같은 문제가 있습니다만, 해결할 수 없습니다.url을 크롬으로 입력하면 에뮬레이터에 경고가 뜨는 것은 보안상의 문제라고 생각합니다.

axios("http://10.0.2.2:5001/api/Users/getall")
  .then((result) => setUsers(result.data.data))
  .then((json) => {
    return json.data;
  })
  .catch((error) => {
    console.error(error);
  })
  .then((response) => response.parse());

제 경우 Hapi.js를 백엔드로 사용하고 있기 때문에 아래 코드와 같이 cors 값을 true로 설정하기만 하면 됩니다.

const server = Hapi.server({
       port: 4000,
       host: 'localhost',
       state: {
           strictHeader: false
       },
       routes: {
           cors: true
       }
});

1. 을 port노드 서버의 번호.이 오류를 해결하는 데 3시간 이상이 걸렸습니다.솔루션은 처음에 6000으로 설정했다가 나중에 3001로 설정했던 포트 번호를 변경하는 것으로 종료되었습니다.그리고 효과가 있었다.localhost URL 음은음음host 。

   "http://localhost:6000/data"

   했습니다.app.listen()에서는, 에서는, 「」, 「」, 「」, 「」라고 .GET in의 async을 하다await axios.get('http://localhost:3001/data')지금은 잘 되고 있습니다.

2. 문제에 는, 과 같이 합니다.address already in use :::#port

   다음 명령 에서 다음과 같이 입력합니다.killall -9 node

이틀 동안 해결책을 찾아본 결과 오류를 해결할 수 있었다는 것을 알려드리고 싶습니다.프록시가 문제의 원인이었으므로 패키지에 프록시를 설정해야 합니다.json file, 그리고 Axios를 사용하는 함수의 다음 지침을 따라야 합니다.

try { await axios.post("user/login", formData).then((res) => { console.log(res.data); }); } catch (error) { console.log(error.response.data.message); }

패키지로 되어 있습니다.json 파일에 프록시를 추가해야 합니다.

"proxy": "http://localhost:6000",

자세한 것은, 이 메뉴얼을 참조해 주세요.여기에 링크 설명을 입력합니다.

를 실행하고 있는 react nativedevelopment「」를 사용하여real deviceUSB를 통해 연결(및 API 서버는 개발 머신의 IP를 통해 액세스 중), 개발 머신과 디바이스가 모두 동일한 네트워크에 연결되어 있는지 확인합니다.

언급URL : https://stackoverflow.com/questions/45980173/react-axios-network-error