cors에러 해결 Access to XMLHttpRequest at 'http://localhost:3001/blocks' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

cors에러 경우

CORS(Cross-Origin Resource Sharing)

자기가 속하지 않은 포트로 정보 보내려고 할 때 주소가 달라서 보안상 안된다고 하는것

 

얘는 별도처리 없이
모두에게 허용하는 방법임!!

const cors = require("cors");

하고 

구동되는 함수에 

app.use(cors());

이렇게 하면 해결된다. 

 

 

 

 

특정 도메인에만 허용하고 싶으면 변수에 특정 도메인 주소만 넣으면 됨.

let corsOptions = {
    origin: 'https://www.domain.com',
    credentials: true
}

app.use(cors(corsOptions));

 

 

 

 

 

 

---

 

특정 도메인을 허용할 때 사용!

Access-Control-Allow-Origin response 헤더를 추가하는 방법도 있음.

app.get('/', (req,res) => {
  res.header("Access-Control-Allow-Origin", "*");
  ...
}

---

 

미들웨어 서버 이용하기
proxy

proxy를 쓰는 경우 밑에 유튜브 영상처럼

/api 설정을 해줘야함.!

 

client에 

setupProxy.js

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

module.exports = function (app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:3001',
      changeOrigin: true
    })
  );
};

서버

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

출처:

https://surprisecomputer.tistory.com/32

[Node.js] express cors 사용하기

https://firework-ham.tistory.com/70

 

 

 

https://www.youtube.com/watch?v=BHSJw8PDwj0&list=PL9a7QRYt5fqkZC9jc7jntD1WuAogjo_9T&index=22