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 정보를 받을 수가 없습니다. 다른 설정 문제일까요?

안녕하세요! 좋은 강의 해주셔서 감사드립니다! 다름이아니라 리액트+스프링부트+스프링시큐리티 환경에서 로그인api 연동중에 CORS 이슈가 발생하여 구글링을 계속하였지만 결국 문제점을 해결하지 못하였습니다.. 죄송스럽지만 이렇게 질문 요청드립니다!! 질문요청드릴 내용은 스프링 시큐리티에서 CORS 설정 부분입니다. 우선 제가 적용한 코드는 아래와 같습니다! @Configuration @EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { @Bean public CorsConfigurationSource corsConfigurationSource(){ CorsConfiguration configuration = new CorsConfiguration(); configuration.addAllowedOriginPattern("*"); configuration.setAllowedMethods(Arrays.asList("*")); configuration.setAllowedHeaders(Arrays.asList("*")); configuration.setAllowCredentials(true); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", configuration); return source; } @Override protected void configure(HttpSecurity http) throws Exception { http .csrf().disable() .cors().and() .authorizeRequests() .antMatchers("/","/api/register","/api/login","/h2-console/**","/api/email","/api/verify","/api/matching/**").permitAll(); http.addFilterBefore(loginProcessingFilter(), UsernamePasswordAuthenticationFilter.class); //ajax 인증방식 사용 http.headers().frameOptions().disable(); //h2 console 접근 } } 이후 talend API Tester를 이용해서 api 테스트를 해본 결과 GET방식에는 문제가 없었으나 POST방식에서 403 에러 가 발생하였고 확인해본결과 preflight 요청에 대한 응답을 보내지못하는 문제로 판단되었습니다. 문제점을 해결하기 위해 configure 메소드에 아래와 같이 preflight 요청을 허가하는 코드를 작성 해보았지만 결과는 동일 하였으며 http.authorizeRequests() .requestMatchers(CorsUtils::isPreFlightRequest).permitAll( 스프링부트에서 configuration.allowCredentials(true) 와 configuration.allowedOrigins("*") 는 동시에 설정 못하도록 하였다고 해서 configuration.allowCredentials(true) 대신 .allowedOriginPatterns("*") 으로 변경해보았지만 역시 결과는 동일했습니다. 추가로 fliter의 순서가 문제인것같아 Filter를 상속받는 CORSFilter를 만들어서 적용해보았지만 결과는 동일 하였습니다. (해당부분은 https://sas-study.tistory.com/298 이 블로그를 참조했습니다.) 현재 어느 부분에서 해결점을 찾아야 할지 갈피를 못집고 있는 상황이라 이렇게 질문 요청드립니다..ㅜㅜ 답변해주시면 정말 감사드리겠습니다!

CORS error를 피하기 위한 방법으로  devServer: { proxy: ".....", } 이렇게 프락시 서버를 설정해서 피했는데, 근데 이것은 Development 모드 일때만 적용되는 된다고 생각합니다. 실제 Production에서는 dist 만 배포될텐데 Production 에서는 어떤 해결방법이 있나여???

안녕하세요! 지금 강의 따라가면서 axios 사용법을 익히는 중입니다~ 다른 서버에서 돌아가고 있는 php 파일을 axios로 불러오고 싶은데 cors 정책에 걸려서 다음으로 나갈 수가 없어서요..! 서로 다른 서버에서의 axios 사용은 어떻게 하는게 좋을까요?

안녕하세요! 강의에서 알려주신대로 프론트-백엔드 서버 요청, 응답은 cors를 통해 해결했었는데요. 제 백엔드 서버가 아닌 오픈 api를 테스트 해보려고 하다가 난관에 막혀 질문드립니다. 강의에서 서버와 서버의 통신에는 cors 문제가 안생긴다고 하여 브라우저에서 제 백엔드로 요청을 먼저 보내고 그 다음에 오픈 api로 요청을 보내는 방식으로 작업을 했는데요. 동작에는 문제가 없긴한데, 좀 느린것 같기도하고... 문제가 생길까 염려되어 질문드립니다.  또한 문제가 있다면 좋은 방법은 무엇일까요? ㅠㅠ 일단 동작하기 위해 아래와 같이 처리했습니다.. + 추가로 기존 글이 있나 찾아보고 질문을 추가합니다!! https://www.inflearn.com/questions/81377 위에 제가 진행한 방식과 프론트에 proxy서버를 따로 띄워(?) 작업하는 방식이 사용하는 상황이 다를 뿐 성능과는 차이가 없나요? (백엔드 서버가 없을 경우 프론트에서 proxy를 사용하는건가요??)