codestates / codestates/Subllet

[ERR] Mixed Content 에러

Open
#164 0 comments 0 reactions 1 assignee Claimed by @namooni View on GitHub
ERR
Dominant language
JavaScript
Stars
0
Forks
0
PR merge metrics
No merged PRs in 30d

Description

### 어떤 에러인가요?
- AWS를 이용해 프로젝트 배포를 진행하던 중,
CloudFront와 S3를 이용한 Client https 배포 및 도메인 연결은 정상적으로
완료 되었는데, 서버와의 통신을 시도할 시
개발자도구의 콘솔에

### 에러 메시지
```shell
Mixed Content: The page at 'https://주소' was loaded over HTTPS,
but requested an insecure script
'http://주소'.
This request has been blocked; the content must be served over HTTPS.
```
위와 같은 Mixed Content 에러가 떴다.
원인이 무엇인고 하니,
https와 http가 함께 사용된 것이 원인이었다.
하지만 그 중에서도,
https 방식을 사용하는 클라이언트에서 http 방식으로 서버에 요청을 보내는것이 문제였다.
보안이 되지 않은 http에서 보안이 강화된 https로 요청을 보내는 것은 문제가 안되지만,
보안이 강화된 https에서 보안이 되지 않은 http의 정보를 요청 한다면
보안은 무용지물이 되는 것이기 때문에
에러가 발생하는 것이다.

### 에러 핸들링 방법
- 나같은 경우는
클라이언트의 axios 요청의 url을 https로 바꾸고,
server 역시 https 방식으로 run을 해주니
정상적으로 작동하게 됐다.

```js
// https를 사용하는 client에서 axios 요청을 보내는 기본 URL
axios.defaults.baseURL = "http://server.subllet.co.kr";

// 수정된 URL
axios.defaults.baseURL = "https://server.subllet.co.kr";
```

### 에러 핸들링을 위해 참고한 레퍼런스 링크

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.