#cors

Next.js axios patch메서드 cors error

현재 마이스터고 재학 중인 2학년 학생입니다. 학교에서 Next.js를 사용하여서 서비스를 만드는 프로젝트를 하고있습니다 이 프로젝트 중 서버와의 통신을 위한 axios를 customAxios로 만들었고 기존 put메서드로 수정 api를 호출했을 당시엔 요청이 갔는데 patch메서드로 하니 CORS에러가 계속 뜹니다. velog와 wrtn등을 이용하여 withCredentials: true도 줘보고 package.json에 "proxy"도 줘봤는데 계속 CORS에러가 뜨네요.. 혹시 몰라서 postman으로 호출했을때는 정상적으로 호출이 가는데 이 경우는 무엇이 문제일까요? 도와주시면 감사하겠습니다.. ㅠㅠ

오픈 api 사용 할 때 cors 에러 어떻게 해결하시나요?

공공데이터 포털에서 오픈 api를 사용하고 있는데 cors 에러가 떠서 해결하고 싶은데, 직접 서버를 건드릴 수 없어서 어떻게 해결해야 할지 모르겠습니다..ㅠㅠ 배포 이후에도 그대로 동작할 수 있는 방법을 찾고 있습니다! 오류 내용 : Access to fetch at '<endpoint url>' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. 현재 아래 사이트를 통해 막아보긴 했는데 중간중간 cors에러가 계속 뜨더라구요 https://allorigins.win/

React-query로 실시간 데이터 반영

리액트를 통해 버스 위치 데이터를 받아서 버스 위치를 실시간으로 보여주는 앱을 개발하고 있는데요, 리액트 쿼리를 활용해 10초마다 refetch하여 데이터를 업데이트하려고 하는데 계속 자동으로 캐싱되어 처음 가져온 데이터만 10초마다 가져오네요 ㅠ (개발자 도구에서 disable cache를 하면 잘 가져옴) 새로고침를 해도 마찬가지 입니다. const { data, isLoading, error, refetch } = useQuery(["busPos"], getData, { refetchIntervalInBackground: true, refetchInterval: 10000, cacheTime: 10000, }); 어떻게 하면 데이터를 잘 업데이트할 수 있을까요?? Open api 사용 중인데 요청 헤더에 캐시 컨트롤을 노 캐시로 하면 cors 에러가 뜹니다 ㅠ

react native로 dart api를 사용하고 싶습니다.

react natvie로 dart api를 활용한 미니프로젝트를 진행하려고 합니다. 그런데 api 사용을 위해서 각 기업의 고유번호를 받아오는 과정에서 api를 호출하면 zip파일을 받게됩니다. 여기서 문제입니다. 그동안 json으로만 받아봐서 zip파일은 경험이 없습니다. react native에서 api호출시 zip파일로 받아서 저장하는 방법이 있을까요? 서버없이 구현하고 싶습니다. 제가 해보니 axios.get으로 받을경우 CORS오류가 발생됬습니다.. react 혹은 react native로 api 호출시 zip파일을 받아서 저장하는 방법을 알고계신다면 알려주시길 부탁드리겠습니다.

next rewrites 작동 방식이 궁금합니다

next에 있는 rewrites 라는 기능을 사용하면 프록시 역할을 하여 cors 에러가 해결 됩니다 그 이유가 next 서버에서 요청을 보내서 서버끼리 요청을 보내는거는 cors 에러가 생기지 않는 원리 인건가요? 다른 이유라면 알려주시면 감사하겠습니다

next.js에서 api 통신 질문

cors 환경에서 api를 axios로 호출하고 있는데요. 같은 api의 클라이언트 사이드, 서버 사이드 url이 서로 상이합니다. axios 또는 fetch에서 호출한 곳이 클라이언트 사이드 인지, 서버 사이드 인지 알 수 있을까요? 알수있는 방법이 있다면 알려주세요. 감사합니다.

선배님들 진지하게 프엔개발자 취준 상담부탁드립니다

안녕하세요 올해 31살입니다.. 노션으로 이력서 작성했다가 이미지 로딩이 너무 느린거에 고민을 하다가 react-notion 라이브러리를 알게됬고 그걸로 작업하다가 CORS때문에 그냥 이력서를 리액트로 제가 직접 만들었습니다. 그 이력서로 취업 문을 계속 두드리고있는데 계속 문전박대 당하고있는 상황입니다 그저 개발이 재밌고 내가 구성한거를 이쁘게 ui만들고 하는게 재밌어서 강의나 책 보면서 배운 지식들을 활용한 결과물들을 포트폴리오로 내세운거라 남들이 보기엔 어떨지모르겠지만요.. 깃사용이랑 커뮤니케이션 코드컨벤션등등을 경험하고싶어서 팀프로젝트를 구해서 해본경험도 있습니다만.. 자신감이 많이 떨어져있는 상태입니다ㅜㅜ 비전공 독학 고졸 이 세가지 타이틀을 다 가지고있는 저라서 더 미래가 불안합니다. 여태 배운지식들은 html,css,js,react,nextjs,mongodb,express,awss3활용,파이어베이스 등등입니다. 면접을위한 cs전공지식 책을 사서 겉핥기식이겠지만 cs공부와 모던자바스크립트 웹사이트에서 js공부도 계속 하고있습니다. 최근까지는 서버리스가 개인플젝만들때는 편리해서 파이어베이스랑 리액트 혹은 넥스트13으로 개발을 주로해왔습니다만 솔직히 내세울만한것도 없는거같고 해서 다른 지식들을 어필해보자! 라는 생각이들어서 최근 구상중인 아이디어를 개발할때 적용해보고자합니다 1. Nextjs+nestjs 2. Nextjs + aws서버리스플랫폼 사용 이 두가지중 어떤게 더 나아보이실까요? 마지막으로 제 이력서입니다.. https://resume-react-phi.vercel.app/

firebase signInWithPopup cors에러.

firebase를 이용해서 로그인눌러서 팝업창이뜨면 구글로그인을 할려고하는데요 팝업창이뜨면 아래와같이 cors 에러가 뜨더라구요. 실행엔 문제가 없지만, 해결하고싶습니다. Cross-Origin-Opener-Policy policy would block the window.closed call. 혼자서 검색해서 이것저것봐도 해결이 안됩니다. 이유가 뭘까요..

Nginx, Express 연결 후 프론트에서 이미지 파일 전송시 408 Error

안녕하세요. 혼자 해보던 도중 도저히 해결이 되지 않아 문의드립니다. - 서버 설계 - 현재 저는 Express앱을 AWS EC2 인스턴스에 NGINX를 설치한 후 proxy_pass에 express앱이 구동중인 port를 연결하여 사용하고 있습니다. 이 과정에서 ALB를 통해 ACM을 연동하여 HTTPS 프로토콜이 사용가능하게 설정까지 하였습니다. 이미지 파일업로드는 multer-s3를 이용해 s3버킷과 연결하여 업로드 되는 방식입니다. - 문제상황 - 로그인과 기본적인 CRUD는 문제없이 되는데, 프론트에서 이미지 파일(multipart/form-data)을 서버로 전송하면 504 오류가 출력됩니다. 1. nginx의 access.log에는 해당 uri의 상태코드가 408이라 출력됩니다. 2. nginx의 error.log에는 readv() failed (104: Connection reset by peer) while reading upstream가 출력됩니다. 3. 개발자도구의 console창에 'server의 이미지 업로드 uri' from origin '프론트 도메인'이 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 이라 출력됩니다. 위 오류를 해결해보기 위해 시도해본 것은 아래와 같습니다 1. NGINX의 proxy_connect_timeout, proxy_send_timeout, proxy_read_timeout, send_timeout을 600으로 설정, client_max_body_size를 500M으로 설정 2. ALB의 유휴제한시간 600 설정 3. Express 앱에 app.set('trust proxy', true); 추가 4. Express-session에 app.use(session({proxy:true})) 추가 5. body-parser에 app.use(bodyParser.json({limit: '1000mb'})); 추가 및 app.use(bodyParser.urlencoded({limit: '1000mb', extended: true})); 추가 6. 업로드되는 uri의 미들웨어에 (req, res, next) => { req.setTimeout(1000000); next(); } 추가 7. upload.single()미들웨어를 주석처리 후 req.file 출력 시도 아직도 해결을 하지 못하였습니다 ㅜㅜ 연휴임에도 도와주시면 너무 감사하겠습니다..

[Django ]CSRF(Cross-Site Request Forgery) 보호를 해제하면 프론트엔드와의 통신에서 CORS(Cross-Origin Resource Sharing)

CSRF(Cross-Site Request Forgery) 보호를 해제하면 프론트엔드와의 통신에서 CORS(Cross-Origin Resource Sharing)가 발생하나요?

django nginx 배포하여 프론트 연동 시 cors error

django-cors-headers 설정까지 완료하였는데 cors-error가 계속 나는데 해결방법이나 에러 원인 확인 방법있나요?

next.js 로그아웃 기능 (서버/클라이언트 공통 코드 작성 방법)

안녕하세요. 현재 로그아웃 기능을 구현하고 있습니다. 로그아웃 진행 시 다른 서브 도메인을 갖고 있는 사이트로 redirect 시킨 후 다시 돌아와야 합니다. 예) a.example.com에서 로그아웃 시 -> b.example.com?redirect=a.example.com 사이트로 리다이렉트 후 다시 a.example.com 사이트로 이동 해당 로직을 구현 함에 있어 클라이언트에서는 문제가 없습니다. 하지만, 서버 미들웨어에서 정상 동작은 하나 첨부 이미지와 같은 CORS 에러가 발생됩니다. 서버/클라이언트에서 동시에 사용할 수 있는 코드로 로그아웃 버튼을 클릭 하여 로그아웃 처리되는 로직을 만들고 싶은데요. 방법이 있을까요? (서버에서 로그아웃 처리가 필요한 이유는 토큰 만료 시 서버 단에서 로그아웃 시키기 위하여..) 단, b.example.com 사이트에서는 어떠한 설정도 불가능

카페24 웹호스팅 중 cors에러 관련 질문입니다.

정부 지원사업으로 3개월짜리 인턴십 진행중인 신입개발자 입니다. 현재 회사에는 시니어 개발자나 선임 개발자가 없어서 정말 초짜 백엔드 1명, 프론트 1명이서 프로젝트르 진행중입니다. node.js - react로 구현한 웹페이지를 카페24 웹호스팅을 통해 배포중입니다. (호스팅 : node.js 호스팅 일반형 / 도메인: htcoummunity.cafe24app.com) 배포된 웹페이지를 테스트 도중 cors에러를 만났습니다. 상황= 로그인 버튼을 누르면 로그인 정보를 체크하는 API가 cors에러로 인해 응답을 받아오지 못하고 있습니다.(모든 api가 안됩니다.) 에러메세지= Access to fetch at 'http://localhost:8001/api/signup/checkuser' from origin 'http://htcoummunity.cafe24app.com' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `local`. POST http://localhost:8001/api/signup/loginEmail net::ERR_FAILED 자체적인 분석으로는 'http://htcoummunity.cafe24app.com' 가 public IP이기 때문에 로컬호스트로 요청하는 api는 리소스의 Private 수준이 더 높기때문에 cors정책에 의해 막힌 것이라고 해석했습니다. 하지만 적절한 해결책은 찾지 못하고 있습니다. Proxy설정까지는 시도해봤지만 문제가 해결되지는 않았습니다. 인턴십이 이제 3일정도 남아서 배포만이라도 깔끔하게 마무리하고 싶은데 해결이 되지 않고 있습니다. 부디 해결책을 제시해주시면 감사하겠습니다!

자바스크립트 api호출 질문입니다.

안녕하세요 현재 한 인강을 보면서 api를 호출하는 공부를 하고 있습니다. 이미지처럼 코드를 작성하고 마지막에 data를 콘솔로 찍어보니 콘솔에 이렇게 에러가 나더라구요. 현재는 맥북으로 코드작성하고있고 크롬 브라우저를 사용하는데 계속 이렇게 에러가 뜹니다. 어제부터 이런 에러가 나서 집에 있는 데스크탑으로 하니 데스크탑에는 정상적으로 데이터가 콘솔에 들어오는데 맥북문제인지 계속 이렇게 에러가 나더라구요. 찾아보니 cors? 프록시? 이런 말이 나오는데 해결방법도 뭔지 모르겠더라구요. 인강에서는 프록시라던지 cors 이런말이 없어서...어떤문제인지 모르겠습니다.

nextauth 를 이용해 springboot 의 jwt를 받아와서 로그인을 구현중입니다.

안녕하세요. nextauth 를 이용해 로그인 구현중입니다. 흔히 생각하는 소셜 로그인이 아닌 username 과 password를 통해 springboot security 에서 jwt를 반환 받아오려고 합니다. // app/api/auth/[...nextauth]/route.ts CredentialsProvider({ name: 'Credentials', credentials: { username: { label: 'Username', type: 'text', placeholder: '아이디' }, password: { label: 'Password', type: 'password' }, }, async authorize(credentials, req) { const res = await fetch(`${process.env.NEXTAUTH_URL}/auth/login`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ username: credentials?.username, password: credentials?.password, }), }); const user = await res.json(); console.log(user); if (user) { return user; } else { return null; } }, }), 그런데 위의 코드처럼 코드를 구성했을때 .env.local 파일의 NEXTAUTH_URL 이 등록이 되면 authorize 가 작동하지 않습니다 . 에러 log라도 있으면 어떻게라도 해보겠는데.. 그것도 없습니다. 그래서 NEXTAUTH_URL 를 등록하지 않고 const res = await fetch(`http://localhost:8080/auth`, 바꾸면 이것역시 에러 log 없이 브라우저상에서 Error 라는 문구만 보여줍니다. 이렇게 생각했을때 authorize는 값을 내부에서만 가져올수 있는거 같은데요. 실제로 가상의 const user = {....} 를 만들어서 반환하면 로그인이 아주 잘 됩니다. 하지만 제가 원하는 방법은 아니죠..ㅍ 검색해보면 prisma 가 많이 나오는데.. 그것 또한 시스템상 제가 원하는 방식이 아닙니다. springboot security 에서 jwt를 받아와서 nextauth에 로그인을 할수 있는 방법은 없을까요? custom login 페이지를 만들어서 해야 할거 같은데 방법을 잘 모르겠습니다. 현재 springboot 서버에 cors 설정이 정상적으로 허용된 상태입니다.

[Nest.js] Kakao, Google Oauth 로그인 CORS 문제 ㅠㅠ (+ React)

안녕하세요 Nest.js 처음부터 공부하면서 혼자 프로젝트를 진행중인데... React(5173 port) + Nest.js(3000 port) 로 Oauth를 구현하고있습니다. ! 현재 Nest.js 쪽에서 @Get('/auth/kakao') @UseGuard(KakaoGuard) @Get('/auth/kakao/callback') @UseGuard(KakaoGuard) 로 요청을 받고있습니다. (Google도 동일) React에서 button click시에 localhost:3000/auth/kakao 로 api요청을 날리면 301 Found가 뜨게되고 'https://accounts.kakao.com/login?continue=~~~~~~~~~~' 로 리디렉션 되지만 CORS 오류가 나옵니다...... ㅠㅠㅠㅠ (구글도 구글 url로 리디렉션) 해당 도메인을 복사하여 브라우저에 직접입력하면 해당 카카오 혹은 구글 로그인 페이지로 접속이 잘되지만... 왜 프론트엔드에선 CORS가 나고있고 어떻게 해결하면 좋을지 모르겠어서 질문 남깁니다 ! 추가로 oauth에 등록하는 리디렉션 url은 http://localhost:3000/auth/kakao/callback 이며, 카카오 웹 플랫폼, 구글 자바스크립트 원본은 http://localhost:5173 입니다 !

Async await fetch 오류

const Content: React.FC = () => { const [htmlContent, setHtmlContent] = useState<string>(''); const data = { "filePath": ""https://cdn-image-dev.test.io/dev/contents/terms/2023/10/11/",", "fileName": "test.html" } const url = `${data.filePath}${data.fileName}`; // HTML 파일 가져오기 const fetchHtmlFile = async () => { try { const res = await fetch(url); console.log('res', res); if (res.ok) { const html = await res.text(); setHtmlContent(html); } else { console.error('Failed to fetch HTML file'); } } catch (error) { console.error('Error fetching HTML file:', error); } }; fetchHtmlFile(); return( <div dangerouslySetInnerHTML={{ __html: htmlContent }} /> ) } fetchHtmlFile 호출 시켜 res에서 얻은 html소스를 가져와 htmlContent에 넣어야하는데 에러나네요,, **에러메세지 Content.tsx:30 Error fetching HTML file: TypeError: Failed to fetch Cors 오류 참고 -- api url : https://api-dev.test.io/api/test/v1/~~ 도와주세요!

사이드프로젝트중 proxy관련 질문있습니다.

현재 사이드프로젝트를 진행중인 취준생입니다. 프론트엔드측에서 로컬에서 원활한 API통신을 위해 proxy를 설정하여 cors를 우회하였는데요. Nextjs13을 사용중이고 rewrites 함수를 next.config 에서 사용하였습니다. 문제는 프로덕션이었습니다. 현재 저희는 Vercel 로 간편하게 배포를 해두었는데요. 프론트 개발서버에서는 cors를 우회하여 api요청과 응답이 정상적이었지만 배포된곳에서는 뜬금없이 403에러가 발생합니다. 혹시 proxy때문에 403에러가 발생하는것일까요?

API url주소를 개발서버,프로덕션일때 어떻게 구분해줘야하나요?

현재 Nextjs로 사이드프로젝트를 진행중인 프론트엔드 취준생입니다. 현재 저희는 개발서버에서 cors를 해결하기위해 next.config 에서 rewrites 함수 를 사용하여 proxy설정을 해주었는데요. 문제는 배포된곳에서 즉 프로덕션환경일때에도 proxy가 설정되어있어서 오히려 여기에서 CORS 에러가 발생하고있습니다. 즉 배포된곳에서는 API 요청을 https://own-server.vercel.app/ 요청을 보내져야하는데 localhost:3000으로 요청을 보내고있기 떄문이라고 생각하고있습니다. 이런경우 환경을 달리할때 api주소라던지 proxy설정이라던지 뭔가 나눠야할것같은데 갈피를 못잡겠어서 질문글 남겨봅니다 ㅠ

Nextjs proxy 백엔드협업 질문드립니다.

현재 nextjs config 를 통해 rewrites 함수를통해 proxy를 설정하여 cors를해결하여 백엔드와 통신하고있습니다. 그러나 CHAT/8 이라는 특정페이지에 접속하면 whitelabel error 가 발생합니다. 이런경우 어떻게 해야할까요..? 갈피를 전혀잡지못하겠습니다. 해당에러는 api를 이상한주소로 요청하면 스프링에서 내뱉는 에러라고 알고있는데... ㅠㅠ async rewrites() { return [ { source: '/:path*', destination: `백엔드api주소/:path*`, }, ]; }, 이렇게 config가 설정되어있습니다.. 원인이 백엔드주소/chat/8 이렇게 요청을보냈는데 백엔드에는 없는api여서 내뱉는 에러인걸까요? 그렇다면 프론트쪽에선 채팅방ID를 chat?id=8 이런식으로 url라우팅을 바꿔야 하는걸까요?

Next.js server component(app router)의 auth 관련 질문 입니다.

안녕하세요. 이번에 Next.js(13)에서 최신 기술인 app router를 기반으로 자그마한 홈페이지를 구축 중에 있습니다. JWT 기반으로 SSR을 구축하고 있습니다. middlware로 어떻게 든 토큰 재발행이 가능한 로그인 구현을 완료 했습니다. 하지만 ServerComponent이다 보니, RSC에서 accesstoken 혹은 refreshtoken과 같은 인증 토큰이 만료 되었을 때, 재 발행을 하려면 어떻게 해야 할까요? cookie나 header는 접근은 가능해도 Set-Cookie를 내려 보내거나 할 수는 없는 걸로 문서에 나오고 실제로도 되지 않습니다. 어떻게 하면 ServerComponent에서 토큰을 재발행 하거나 다른 인증 방법이 있을 까요? 아니면 JWT + Session으로 가는 조합을 사용 해야 할까요??? 또, client와 server 간의 토큰 공유를 위해 access-token만 http-only를 해제하고 사용 중에 있습니다. 이게 cors나 csrf와 같은 공격에 취약한 문제가 있어서 이게 올바른 구현 방법일까요? 일단 제가 찾은 방법으로 가장 쉽게 해결되는 방법은 아직 실험 단계인 server action을 활성화 해서 클라이언트에서 토큰을 가지고 있을 필요가 없이 서버에서만 관리 하는 방법입니다. BFF을 일부 수용해서 해결 했습니다. front <-> BFF <-> api

앱에서 백엔드 서버로 api 요청을 보내려고 하는데 질문 있습니다.

앱에서 백엔드 서버로 api 요청을 보내려고 합니다.백엔드에서 cors 설정해 준 것만 api 요청이 가능하도록 하고 있는데, 앱의 도메인이 등록이 안되어 있어서 api 요청이 안되고 있습니다. 혹시 앱에서 어떻게 설정해 줘야 할지 아시는 분 계신가요??

CORS 헤더는 왜 서버에서 설정하나요?

제곧내입니다. 제 생각에는 임의 JS 실행이나 XSS 같은 상황으로부터 방어하기 위해서 있는 거라고 생각했는데 사실 서버에서 CORS를 실행하면 누가 악의적으로 헤더 전체 허용하고 취약한 JS를 보내버리면 CORS 설정이 아무 의미 없는 것 아닌가요? CORS는 헤더는 서버를 보호하기 위해 있는 건지 궁금합니다!

안녕하세요 cors로 고통받고 있는 주니어 개발자입니다ㅜㅜ

현재 안드로이드 + 리액트로 하이브리드 앱을 개발하고 있습니다. 웹뷰 UI작업 이후에 서버와 Rest API 통신을 하려 합니다. axios를 이용해서 서버와 통신하려고 하는데 SOP로 인한 CORS 에러로 통신을 못하고 있습니다.. 현재 안드로이드에서 사용하고 있는 웹뷰 주소가 192.100.200.300:3000 이라고 가정하고 서버의 주소가 106.100.200.300:4000이라고 가정한다면 어떤 방법으로 통신할 수 있을까요..? 여기저기 알아보니까 서버에서 Access-Control-Allow-Origin을 ‘*’ 등으로 설정하고 웹뷰에서 axios를 실행할 때 header에 Access-Control-Allow-Origin을 추가하면 되는 것 같는데 맞나요?? 현재 서버는 수정할 수가 없어서 웹뷰에서만 수정이 가능한데 방법은 없는건가요ㅠㅜ

react 서버에서 openvidu 서버 post 요청 500 에러

React 에서 Openvidu 서버를 활용해서 WebRTC 를 적용하려고 합니다. Openvidu 서버로 POST 요청을 보냈는데 CORS 오류가 발생해서 PROXY 를 설정했어요. 그런데 이제는 500 에러가 발생하고 있습니다. 혹시 몰라서 프로젝트 클론해서 새로 보냈는데 이때는 문제 없이 잘 되네요. 오류 발생 원인을 파악하고 싶은데 어디서 찾아야 할까요? 혹시 비슷한 문제 겪어보신분 있을까요?

Nginx 에서 던지는 413에러 처리하는법

안녕하세요! 처음 질문 남겨봅니다 Nginx 에서 용량이 너무 크면 413에러를 던지는것 까진 좋은데, 이후에 사용자에게 해당 에러는 용량이 너무 커서 발생했다는걸 알려주려고 합니다. 그런데 catch error를 해보면 status가 따로 없이 그냥 network error 아니면 CORS가 뜨더라구요. 혹시 이런경우에 어떻게 해야하는지 알수 있을까요?

교차출처 관련 백엔드 설정

안녕하세요! CORS 관련 공부하다가 잘 모르는 것이 있어 질문드립니다. 서버에서 설정해주는 allow-origin 헤더는 브라우저측 CORS 에러를 해결해주기 위한(리소스 공유를 위한) 해결책인 것으로 알고 있습니다. 그래서 CORS 에러가 발생하는 상황에서도 서버에서는 이미 요청에 대한 작업을 실행한다고 알고있는데요 이를 어느정도 보안적으로 방지하기 위해 preflight 를 사용하는 것으로 알고 있습니다. preflight나 브라우저 스펙과는 별개로 서버측에서 요청의 출처를 검사해서, 작업을 수행할지 말지 결정하는 로직을 따로 구현하기도 하는지 궁금합니다. 어떤 키워드로 알아보면 될지 도움주시면 감사하겠습니다!

로컬 환경에서 외부 사이트 로그인 인증 질문입니다 !

nodejs - axios - express - cors 안녕하세요 올해 컴공으로 전과하게되어 웹 프론트엔드를 바라보고 공부중인 3학년 학생입니다. 다름이아니라 간단하게 학교 홈페이지에서 식단 리스트를 받아와 데이터베이스에 저장 후 한 주의 학식과 기숙사 식당의 메뉴를 보여주는 웹 사이트를 만드는 중입니다만... 학교 홈페이지에는 재학생만 접근이 가능하여 nodejs 서버에서 제 아이디와 비밀번호로 post 요청을 보냈고 response 헤더에는 status 200이 나타나는데 메뉴 페이지에 get 요청을 보내면 세션이 만료되었다는 응답과 응답 헤더에는 connection: 'close'로 나타납니다. 그래서 인증 문제인가싶어 로그인 요청 후 받은 cookie값을 변수에 저장하고 get 요청에 담아 보냈지만 결과는 같았습니다. post 요청 이후 get 요청을 하도록 비동기 처리했습니다. 지금 화장실에서 글을 쓰느라 코드를 적지 못하는점 양해 부탁드립니다 ㅠㅠ... +아 혹시 포스트맨에서 로그인 요청시에는 쿠키 값이 총 세개가 있었는데 나머지 두개가 인증에 관한 것인지 찾아보겠습니다. ++ 로그인 요청시 받은 쿠키입니다 cookie : { 세션아이디 httpOnly : true, sameSite : 'none', maxAge : 5300000, secure : true, httpOnly : true },

webpack-dev-server proxy설정으로 cors 정책 우회가 가능한 이유

안녕하세요, 2년차 프론트엔드 개발자입니다. 최근 모회사 프론트엔드 직무 면접을 보던중, cors에 대한 질문을 받았었습니다. 이에 대해 제가 드린 답변은 아래와 같았습니다. "cors는 다른 출처임에도 불구하고 브라우저상에서 서로 상호작용이 가능하도록하는 정책이고, 이를 정석적으로 사용하기위해서는 Backend 서버에서 HTTP 응답 헤더의 Access-Control-Allow-Origin 속성에 Frontend 서버의 origin을 추가해주면 된다. 또한, Frontend단에서 개발간에는 위에서 말한 Backend 서버측에서의 작업없이도 webpack-dev-server의 proxy설정을 사용하면 proxy서버가 Backend 서버의 origin과 동일한 origin에서 상호작용해줌으로써 cors 정책관련 이슈를 우회할 수 있다." 위 답변에 추가로 면접관께서 여쭤보셨던 것은 "개발간에 어쨌든 로컬에서 proxy서버를 띄울텐데, 그 서버가 어떻게 Backend 서버와 같은 origin으로 상호작용할 수 있느냐?" 였는데요, 제대로 된 답변을 드리지 못하고 면접이 끝난 뒤에도 찾아본다고 찾아봤지만 해당 내용에 대해서 명확한 이유를 찾지못하였습니다. 제가 네트워크 지식이 부족해서 기본적인 proxy개념을 이해하지 못하고 있을 수도 있는데요, 혹시 관련 내용에 대해 잘 아시는 분이 계시다면 알려주시면 감사하겠습니다!