jQuery .ajax() 메서드를 통해 get 또는 post로 비동기통신 할 때 mixed content 오류 발생할 때 대처법
https 프로토콜만 지원하는 특정 웹페이지에서 AJAX 통신을 시도한다고 가정
url : ‘/aaa/bbb/file.ext’
위의 url 로 파라미터를 던지고 결과를 받아야 하는데 아래와 같은 오류가 발생할 것이다.
Mixed Content: The page at ‘https://page.com‘ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint
This request has been blocked; the content must be served over HTTPS.
This request has been blocked; the content must be served over HTTPS.
[https 에서 AJAX 로 http 페이지의 리소스 얻을 때 핵심 지식]
If you load a page in your browser using HTTPS, the browser will refuse to load any resources over HTTP. As you’ve tried, changing the API URL to have HTTPS instead of HTTP typically resolves this issue. However, your API must not allow for HTTPS connections. Because of this, you must either force HTTP on the main page or request that they allow HTTPS connections.
If you load a page in your browser using HTTPS, the browser will refuse to load any resources over HTTP. As you’ve tried, changing the API URL to have HTTPS instead of HTTP typically resolves this issue. However, your API must not allow for HTTPS connections. Because of this, you must either force HTTP on the main page or request that they allow HTTPS connections.
Note on this: The request will still work if you go to the API URL instead of attempting to load it with AJAX. This is because the browser is not loading a resource from within a secured page, instead it’s loading an insecure page and it’s accepting that. In order for it to be available through AJAX, though, the protocols should match.
[구글번역]
HTTPS를 사용하여 브라우저에 페이지를로드하면 브라우저는 HTTP를 통해 리소스를로드하지 않습니다. 시도했지만 HTTP 대신 HTTPS를 사용하도록 API URL을 변경하면 일반적으로이 문제가 해결됩니다. 그러나 API는 HTTPS 연결을 허용해서는 안됩니다. 따라서 기본 페이지에서 HTTP를 강제 실행하거나 HTTPS 연결을 허용하도록 요청해야합니다.
HTTPS를 사용하여 브라우저에 페이지를로드하면 브라우저는 HTTP를 통해 리소스를로드하지 않습니다. 시도했지만 HTTP 대신 HTTPS를 사용하도록 API URL을 변경하면 일반적으로이 문제가 해결됩니다. 그러나 API는 HTTPS 연결을 허용해서는 안됩니다. 따라서 기본 페이지에서 HTTP를 강제 실행하거나 HTTPS 연결을 허용하도록 요청해야합니다.
참고 사항 : AJAX로 API URL을로드하려고 시도하지 않고 API URL로 이동하면 요청이 계속 작동합니다. 이는 브라우저가 보안 된 페이지 내에서 리소스를로드하지 않고 대신 안전하지 않은 페이지를로드하는 것이고 받아들이 기 때문입니다. 하지만 AJAX를 통해 사용하려면 프로토콜이 일치해야합니다.
[해결책]
<head>태그 안쪽에 아래의 메타태그 한 줄을 추가 해주면 해결 된다.
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
댓글
댓글 쓰기