put, patch, delete 메서드의 경우 options (사전 요청) 을 보내게 된다고 하셨는데요. 물론, 설명 주신것처럼 "Access-Control-Max-Age" 를 통해서 캐싱을 하는 방법도 있겠지만, get 과 post 요청만 사용하는게 (사전 요청을 하지 않으니) 좀 더 효율적인 방법이 될수 있을까요?

예제에서 처럼 html 을 response 하지 않고 rest api 를 통해 fe 와 통신하는 경우에도 csrf 를 사용하는 경우가 있을까요? 만약 있다면 어떻게 사용하는지도 알고 싶습니다.

변경된 API 주소를 사용하려 하니CORS 오류가 있어서 데이터를 가져오지 못합니다.해결 방법이 있을까요?

서버 구성해서 직접 만들고 있는데, 입력폼에서 스크립트가 안먹히더라고요. 쭉 강의 보고 실습필요한 부분 다시 보는데 일전에 브라우져 설정을 변경 했었었나요. 기억이 가물합니다! Content-Security-Policy-Report-Only 이 옵션 때문에 가능했던가요.   

수업에서 브라우저 인스펙터의 옵션에서 [캐시 사용안함] 를 off 후 테스트 하셨는데 캐시 사용 안함은 헤더와 상관없이 캐시를 아예 사용안하는 옵션인가요

querystring.decode(body)로 하시면 해결 가능합니다

"[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스강의" 를 수강하고 배포 부분을 이 강의를 수강하고 있는 수강생입니다. 고농축 강의에서 만든 포트폴리오를 aws에서 배포했을때에, CORS 에러가 다음과 같이 나는 문제가 있는데 어떻게 해결해야할까요? 찾아보니 백엔드에서 CORS 를 허용해야하거나 프론트에서 프록시를 사용하라고 되어있는데 어떻게 해결해야할지 모르겠네요 

완강 후 책도 한번 읽어보려고 합니다추가로 강의자료 링크를 강의 아래에 달아주시면 좋을 것 같습니다.

JS파일이 서버에 저장되지만 실행은 클라이언트에서 된다는 부분에서 CORS와 정확히 어떤 연관이 있다는 건가요? CORS는 서버가 다른 출처로부터의 액세스를 허용하거나 제한할 수 있게 하는 HTTP 헤더 기반의 메커니즘이라고 알고 있는데 JS파일 저장 실행 위치만 어떤 관련이 있는지 모르겠어요

우선 좋은강의 감사드립니다. 타사이트나 *투브에서도 강의 들었는데 좋아서 인프런에서도 구매하게 됐습니다. CORS 강의를 들으면서 질문이 있어서 문의드립니다. 아래와 같이 api 서버나 dev 서버 도메인을 다르게 구성하려고 하는데, 도메인이 다르기 때문에 CORS 이슈가 하위도메인의 경우에도 적용되나요? www.domain.com : 프론트엔드 애플리케이션(프론트엔드), port : 3000api.domain.com : 백엔드 api 애플리케이션 , port : 8080dev-api.domain.com : 개발 테스트용 서버, port : 8081실제 현업에서는 백엔드의 api, auth 등을 도메인을 어떻게 구성하는지 궁금하고 어떻게 조치하는지도 궁금합니다.감사합니다.

cors, gitignore, env가 모두 작동하지 않습니다. 1) cors와 env에 대하여'npm install cors, npm install dotenv'를 통해 설치를 완료했고up to date, audited 599 packages in 2s122 packages are looking for fundingrun npm fund for detailsfound 0 vulnerabilities라고 잘 설치된 것을 확인했습니다.그리고//server.js const express = require('express'); const app = express(); const test = require('./Router/test'); const cors = require('cors'); app.use(cors()); require('dotenv').config(); console.log("테스트: "+process.env.NEXT_PUBLIC_TEST); 라고 코드를 작성했는데, 플러그인 덕분인지 코드를 작성했을 때는 제대로 NEXT_PUBLIC_TEST에 해당하는 값이 미리보기로 뜨다가(사진 첨부),막상 실행하면 "테스트: undefined"라고 뜹니다. 마찬가지로 cors도 제대로 설치하고 react의response = await fetch('/backEndProc', { method: 'POST', body: formData, });라는 코드에 알맞게 app.post('/backEndProc',라고 코드를 작성했음에도 " POST http://localhost:3000/backEndProc 404 (Not Found)MakePage.jsx:130 Error: Syntax" 오류가 발생했습니다.  2) gitignore에 대하여깃이그노어에는 다음 코드가 들어있습니다."node_modules.env"원래 node_modules에 대하여 gitignore가 잘 작동했는데, npm install cors 이후로 갑자기 node_modules가 gitignore되지 않고, 또 .env에 대해서도 gitignore되지 않습니다. (.env와 gitignore은 같은 디렉터리에 있습니다) 도움을 주시면 정말정말 감사하겠습니다...........ㅠㅠㅠㅠㅠ 며칠째 골머리만 앓고 있습니다...

안녕하세요.과제로 공공데이터 오픈API를 사용해서 웹을 하나 만들게 되었습니다.api에서 자료를 받아오는 과정에서 cors에러가 발생해 해결하려다가 결국 혼자서 해결이 안되어 질문 드립니다. package.json에 { ... "proxy": "http://openapi.molit.go.kr" ... }를 작성하고 실행했을 때이런 에러코드가 발생하며 npm start가 진행되지 않습니다.터미널에서 npm install http-proxy-middleware 설치 후/src/setupProxy.js file 생성, 다음과 같이 코드 작성npm start 시 접속이 불가능도대체 어떻게 해야 cors에러를 해결가능할까요...아무리 찾아봐도 이 두가지 방법밖에 안나오는데 두가지 다 적용이 안되니 답답해 죽겠습니다..

안녕하세요 이번에 강의를 다 듣고 또 게시판도 여러번 수행해서 정말 잘 되는것을 확인을 하였습니다 하지만 이번에 react와 함께 연동을 해서 view는 react를 사용하고 또 api 설계는 php로 한번 해보자 하고 도전을 해 보았는데요    laravel에서는 굳이 cors를 지정하지 않아도 잘 연동이 되더라고요   하지만 이번 프로젝트는 어떻게 react를 사용해야하지.. 라고 막혔습니다 제가 생각했던 아이디어는   -frontend 폴더 -backend 폴더 를 따로 두고 proxy를 두어서 php 쪽에서 그냥 header로 cors를 넘겨주면 되지 않을까.. 라고 생각하고 들었는데요 https://github.com/DevelopJKong/php_react_project 일단 문제점은.. 제가 아직 실력이 부족해서 npm 으로 프로그램을 돌리는것이 아니기 때문에 되는게 아닐까? 라는 생각이 들었습니다 그래서 이번에는 상위 폴더에서 돌리는것이 아닌 따로따로서버를 켜서 해놨는데요 그래도.. 안되더라고요 혹시나 싶어서 CorsMiddleware를 만들어서 아래와 같이 만들어보고 post 로 보낼때 Route::add(x,y,[CorsMiddleware::class]) 도 입력해봤는데요 코드는 아래와 같습니다 <?php namespace App\Middlewares; use Eclair\Routing\Middleware; class CorsMiddleware extends Middleware { public static function process() { header("Content-type: application/x-javascript;charset=utf-8"); Header("Access-Control-Allow-Origin: *"); Header("Access-Control-Allow-Methods: POST, GET, OPTIONS"); Header("Access-Control-Allow-Headers:orgin, x-requested-with"); } } <?php use Eclair\Routing\Route; use App\Middlewares\RequireMiddleware; use App\Middlewares\CsrfTokenMiddleware; use App\Middlewares\CorsMiddleware; Route::add('post', '/api/auth', '\App\Controllers\AuthController::login', [CorsMiddleware::class] ); 조금 조언을 얻고자 이렇게 글을 쓰게 되었습니다 laravel에서는 그래도 해봤는데 laravel에서는 되더라고요 근데 왜이 프로젝트에서는 안될까? 라는 생각이 들었습니다 감사합니다 :)              

바꾼게 하나도 없이 선생님께서 알려주신 대로 똑같이 했는데 cors 에러가 나요... 서버 쪽에서 Access-control-Allow-origin 헤더 설정하라는데 어떻게 해야 해결할 수 있나요?

질문은 아니지만 간단히 해결할 수 있어 글 남기고 갑니다. 저의 경우 상품등록 페이지를 만들다 localhost:5000/${file} 이 cors 이슈가 있어 이미지 미리보기 기능이 구현이 안되었습니다. 아래와 같이 백엔드 서버에 cors를 해결하는 access control 부분을 추가 해보시길 바랍니다. app.get('*', (req, res) => {   res.header("Access-Control-Allow-Origin","*");   res.sendFile(path.join(__dirname, '/public/index.html')); });

프론트엔드는 localhost:3000 에서 next.js 로, 백엔드는 localhost:4000 에서 node.js 로 만들고 있습니다. 쿠키를 다루기 위해서 'Access-Control-Allow-Credentials' 를 true로 만들고 싶어서 cors 미들웨어에 credential: true 를 옵션으로 주었습니다.     그런데 이렇게 해봐도 'Access-Control-Allow-Credentials' 가 true 로 되지 않습니다.     구글에 검색해봐도 cors 옵션으로 credential: true 를 하면 된다고 하는데 아무리해도 되지 않습니다... 뭐가 문제일까요?

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.   뭐 때문에 자꾸 CORS 에러가 뜨는건지 모르겠네요ㅠㅠ 아무리봐도 똑같이 친거같은데.. 한번 봐주실 수 있으실까요?    

안녕하세요 강사님 해당 강의를 통해서 엄청난 꺠달음과 영감을 얻게되어 감사하다는 말씀을 먼저 올리고싶습니다. 제가 해당 강의를 통해서 성장을 하여 감히 마이크로서비스를 이용해서 프로젝트를 진행하고 있습니다. 하지만 프로젝트를 진행하다 보니 몇일 동안 해결할 수 없는 문제와 마주하게 되어 이렇게 문의 드립니다. 우선 Spring Cloud Gateway 가 존재하고 User-Service 가 그 뒤에 위치해 있습니다. User-Service 에서는 사용자가 로그인을 한다면 access_token 과 refresh_token 을 쿠키에 담아서 반환합니다. 그리고 로그아웃을 한다면 access_token 과 refresh_token 의 쿠키 값에 null 을 넣고 expires 를 과거로 만들어 만료되도록 합니다. Front 에서는 로그인을 수행하면 access_token 과 refresh_token 을 잘 받아서 브라우저에 저장하는 것을 확인하였습니다. 로그아웃을 수행한다면 응답으로 set-cookie 를 잘 받아오는 것도 확인을 하였습니다. - access_token=; expires= 1960 00:00:00 ... httpOnly; - refresh_token=; expires= 1960 00:00:00... httpOnly; 하지만 실제 브라우저에서는 쿠키가 지워지지 않더라구요.. axios의 credential 과 gateway 에서의 cors filter 도 설정을 잘 하였습니다. 실제 프로젝트 소스는 아래에 있습니다. - User-Service :: https://github.com/dhslrl321/PCUSS-User-Service - Gateway Service :: https://github.com/dhslrl321/PCUSS-Gateway-Server - Front 비동기 통신 코드 :: https://github.com/dhslrl321/PCUSS-Official-Site/blob/master/client/services/authService.js - Front axios 모듈 :: https://github.com/dhslrl321/PCUSS-Official-Site/blob/master/client/utils/api.js

강의에선 app에 cors 미들웨어를 붙여서 /user에 post하는 경우도 한번에 해결되었는데, 제가 개인적으로 연습할 때는 app이 아닌 요청의 대상이 되는 router 각각에 use(cors())를 붙여줘야 정상적으로 작동하더구요.proxy로 시도해보아도 app에 직접하는 것은 안되던데 이유가 뭔지 알 수 있을까요? 

POST 요청 시에는 req.user로 유저 데이터가 잘 받아지는데 GET 요청시에 계속 req.user 정보가 undefined로 뜨네요.. front/sagas/index.js back/app.js 위와같이 credentials도 true로 바꿔 줬는데도 GET에서 user 정보를 받을 수가 없습니다. 다른 설정 문제일까요?