NodeJS로 자신만의 CORS 프록시를 즉시 작성하십시오.

3299 단어 nodejavascriptproxycors
그렇지 않으면 CORS를 알 것입니다. 그렇지 않으면 이 기사를 읽지 않을 것입니다. 이제 이를 넘어 몇 줄의 JavaScript로 코딩된 솔루션으로 바로 넘어가겠습니다. 또는 그 전에 문제를 보여주십시오.

아래 내 데모 페이지에 표시됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <textarea id="output" rows="20" cols="120"></textarea>

  <script type="module">
    const outputNode = document.getElementById('output')
    const TARGET_URL = 'https://datahub.erde-und-umwelt.de/en/api/getServiceConfiguration/climateResilience'
    const URL = TARGET_URL
    // const URL = `http://localhost:8088/${TARGET_URL}`
    fetch(URL)
      .then((response) => response.json())
      .then((data) => outputNode.textContent = JSON.stringify(data, null, 2))
      .catch((exception) => {
        outputNode.textContent = exception
      })
  </script>
</body>
</html>


REST API에서 일부 JSON 데이터를 요청하고 결과를 텍스트 영역에 넣습니다.

그러나 이것은 잘못된 CORS 헤더 때문에 발생하지 않습니다. 모든 클라이언트에 대해 요청이 허용되지 않습니다.

따라서 오류만 표시됩니다.

이를 넘어서기 위해 데이터를 요청하는 백엔드를 작성하고 범용 CORS 헤더를 사용하여 모든 사람이 사용할 수 있도록 할 수 있습니다.

NodeJS에서 이 백엔드를 작성할 것입니다. JavaScript를 의미합니다. 아이디어는 페이지에서도 볼 수 있듯이 다음과 같이 요청된 URL 앞에 프록시를 배치하는 것입니다.

http://localhost:8088/${TARGET_URL}


즉, http://example.de에 대한 요청은 결과에서 http://localhost:8080 접두사가 붙습니다 http://localhost:8080/http://example.de
프록시는 요청을 수신하고 요청에서 요청된 URL을 추출하고 데이터를 요청합니다.

코드는 http-proxy-middleware를 사용하여 매우 간단합니다.
아래에서 볼 수 있듯이 할 일이 별로 없습니다.

const express = require('express')
const cors = require('cors')
const { createProxyMiddleware } = require('http-proxy-middleware')

const app = express()
app.use(cors())
app.use(createProxyMiddleware({
  router: (req) => new URL(req.path.substring(1)),
  pathRewrite: (path, req) => (new URL(req.path.substring(1))).pathname,
  changeOrigin: true,
  logger: console
}))

app.listen(8088, () => {
  console.info('proxy server is running on port 8088')
})


따라서 외부 NodeJS 모듈 express , http-proxy-middleware 및 cors 을 사용합니다.

어떻게 이루어지나요?

이것은 서버를 생성합니다.

const app = express()


이렇게 하면 모든 경로, 방법 및 클라이언트에 대해 CORS가 활성화됩니다.

app.use(cors())


유일한 특별한 까다로운 라인은 이것입니다.

app.use(createProxyMiddleware({
  router: (req) => new URL(req.path.substring(1)),
  pathRewrite: (path, req) => (new URL(req.path.substring(1))).pathname,
  changeOrigin: true,
  logger: console
}))


미들웨어를 생성합니다. 미들웨어는 포함된 URL로 라우팅하고 경로를 다시 씁니다.

그리고 그게 다야. NodeJS에서 CORS 프록시를 만들었습니다.
루아의 게터
척하는 클라이언트는 멋지다

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage