프로젝트 진행 에러, API를 불러오는데 발생한 에러

문제1

login.js:34 Refused to connect to 'http://146.56.183.55:5050/user/login' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

 

로그인 API 데이터를 받아올때 나타나던 에러... 해결못하고있음

 

login.js:34 'http://146.56.183.55:5050/user/login' 연결이 콘텐츠 보안 정책 지침 

"default-src 'self'"를 위반했기 때문에 연결을 거부했습니다. 

'connect-src'가 명시적으로 설정되지 않았으므로 'default-src'가 대체 수단으로 사용됩니다.

 

추측

1. API를 사용하는데 허가나지 않았다

2. 서버가 닫혀있다.

 

테스트

1. 기본 url을 변수로 지정하고 fetch에 사용할때 url+'/login' 식으로 사용을 -> '00.00.00:0000/login' 으로 변경 실패

app.use((req, res, next) => {
  csp({
    directives: {
      defaultSrc: ["'self'"],
      styleSrc: ["'self'"],
      scriptSrc: ["'self'"],
    },
  })
});

실패

 

검색한 해결 방법들

1. http:// 를 앞에 꼭 입력해주어야한다. https 도 에러가 발생한다 실패

2. 기본인 app.js에 app.use(cors()); 를 추가한다. 실패

3. html 상단의 meta content 부분을 수정 실패

4. 현재 가장 유력한 후보는 API 서버가 닫혀있음

 

자고일어나서 확인할 예정

 

해결

1. app.js 에서 

app.use(helmet());

해당 코드를 제거하고

app.use(
  csp({
    directives: {
      defaultSrc: ["'self'","","'unsafe-inline'"],
      styleSrc: ["'self'","","'unsafe-inline'"],
      scriptSrc: ["'self'","*","'unsafe-inline'"],
    },
  }));

해당 코드로 변경을 하고 경고를 무시합니다 그 후

터미널 창에서 

npm install helmet-csp

해당 csp 모듈을 다운받아 통과하는데 성공하였음