패키지 내 프록시.json은 가져오기 요청에 영향을 주지 않습니다.

패키지 내 프록시.json은 가져오기 요청에 영향을 주지 않습니다.

React를 사용하여 개발 서버에서 데이터를 가져오려고 합니다.

에서 클라이언트를 실행하고 있습니다.localhost:3001및 백엔드port 3000.

가져오기 요청:

 const users = fetch('/api/users');
    users.then((err,res) => {
      console.log(res);
    })

개발 서버와 webpack-dev-server를 실행하면 다음과 같은 출력이 나타납니다.

GET http://localhost:3001/api/users 404 (Not Found)

패키지에 프록시를 지정해 보았습니다.API 서버에 요청을 프록시하지만 변경된 것은 없습니다.

여기 제 소포가 있습니다.json 파일:

.. 및 webpack.config:

제 프로젝트에서 더 보고 싶은 것이 있으면 말씀해 주세요.죄송합니다. 부족한 점이 있고 꼼꼼하지 않다면 아직 이 기술을 사용하는 것이 익숙하지 않습니다.

가져오기 요청 API url을 수정하여 완전한 호스트 이름을 지정할 수 있습니다.

 fetch('http://localhost:3000/api/users') 

또, 확실히 할 수 있도록 해 주세요.CORS백엔드에서 활성화됨

웹 팩을 통해 리다이렉트하는 경우,devServer.proxy~하듯이

devServer: { 
    inline: true, 
    contentBase: './dist', 
    port: 3001, 
    proxy: { "/api/**": { target: 'http://localhost:3000', secure: false }  }
 }

제가 게임에 조금 늦은 건 알지만, 나중에 참고할 수 있도록 남겨두겠습니다.

devServer 프록시가 예상대로 작동하도록 하려면 HTTP Accepts 헤더를 "text/html"이 아닌 다른 것으로 지정해야 합니다.이를 수행하려면 fetch가 두 번째 인수로 받아들이는 init-object를 사용합니다.간단한 예:

fetch("/api/profile",{
    headers:{
        "accepts":"application/json"
    }
})
.then(res => {
    console.log(res);
    return res.json();
})
.then(json => console.log(json) )
.catch( a => { console.log(a) });

그 이유는 WebPack Dev Server는 보통 컨텍스트/네임스페이스를 사용하여 서비스 대상과 전송 대상을 구별하기 때문입니다.create-react-app 스크립트는 의 프록시 경로에서 네임스페이스를 추출하지 않습니다.package.json대신 스크립트에는 HTTP GET 이외의 것을 사용하는 모든 요청이 전송되는 의도적인 기본 동작이 있습니다.또한 HTTP GET을 사용하는 모든 것.text/html처럼Accepts헤더가 전송됩니다.

그 이유는 대부분의 React 앱이 AJAX/Fetch를 사용하여 일부 API와 통신하는 SPA(Single Page Applications)이기 때문입니다.API는 보통 JSON 또는 XML을 사용하지만 사용하지 않습니다.text/html.

패키지 안에.json

"proxy": {
    "/api/users": {
        "target": "http://localhost:3000"
    }
},

악시스를 사용했을 때도 같은 문제가 있었습니다만, 완전한 호스트명을 사용해 Cors를 유효하게 했을 뿐입니다.

const response = await axios.get('http://localhost/users/');

Cors 설치

npm i cors

코르스를 사용하다

const express = require("express");
const request = require("request");
const cors = require("cors");
const app = express();

app.use(cors());

app.use("/", (req, res) => {
  //...
});

app.listen(80, () => {
  console.log("CORS-enabled web server listening on port 80");
});

참조

저는 https://github.com/webpack/webpack-dev-server/issues/793#issuecomment-316650146의 사용자 젤리피쉬톰의 솔루션이 효과가 있었습니다.

devServer: {
  proxy: {
    "*": "http://[::1]:8081"
    // "secure": false,
    // "changeOrigin": true
  }
},

Webpack Dev Server는 Webpack 구성 구성을 사용하여 프록시 요청을 제어합니다.

언급URL : https://stackoverflow.com/questions/44365577/proxy-in-package-json-not-affecting-fetch-request