programing

웹 API 오류 - 이 요청이 차단되었습니다. 콘텐츠는 HTTPS를 통해 제공되어야 합니다.

starjava 2023. 5. 2. 22:14
반응형

웹 API 오류 - 이 요청이 차단되었습니다. 콘텐츠는 HTTPS를 통해 제공되어야 합니다.

우리는 api를 azure에 배치하고 각도 5로 작성된 우리의 웹 앱에서 소비하려고 노력했습니다.그러나 api를 사용하려고 하면 다음과 같은 오류가 발생합니다.

크롬 혼합 콘텐츠:'https://somedevapp.azurewebsites.net/ #/message something'의 페이지가 HTTPS를 통해 로드되었지만 안전하지 않은 XMLHttpRequest 끝점 'http://admindevapp.azurewebsites.net/api/data/getdata' 을 요청했습니다.이 요청은 차단되었습니다. 콘텐츠는 HTTPS를 통해 제공되어야 합니다.

Firefox 혼합 활성 콘텐츠 로드 차단

이 문제가 CORS와 관련이 있습니까?이 문제를 해결하는 방법은 무엇입니까?

이것에 대한 어떤 도움도 감사합니다!

웹 앱이 HTTP를 통해 호스팅되는 경우, 웹 앱이 사용하는 모든 외부 리소스(CDN, 스크립트, CSS 파일, API 호출)도 SSL을 사용하고 HTTP를 통해 보호되어야 합니다.생각해 보세요.만약 당신의 앱이 차례로 API에 대해 안전하지 않은 요청을 한다면, 그것은 당신의 앱이 안전하다는 목적을 좌절시킬 것입니다.

따라서 다음 중 하나를 수행할 수 있습니다.

  1. Chrome에서 제안하는 것처럼, HTTP를 사용하도록 API 호출을 변경합니다(권장).

  2. HTTP 대신 HTTP 사용

  3. 의 다을추니를 합니다.meta당신의 에태지에 .<head>HTML의 요소:

    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

이에 대한 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests 에서 확인할 수 있습니다.

이것을 사용하세요 ---- 머리 부분에 추가하세요. 제 날씨 애플리케이션으로 이것을 시도해보고 지금은 잘 작동합니다.

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

헤더 섹션에만 추가합니다.

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

리소스 API가 HTTPS 요청을 지원하는 경우에만 이를 사용할 수 있습니다.

예: "ip-api.com "과 "https://ip-api.com/json "은 모두 "http://ip-api.com/json "이 HTTPS 요청을 지원하지 않는 경우 동일한 응답을 반환하지 않습니다.

아래 메타 태그는 Chrome이 HTTP 요청에 대해 불평하는 것을 방지하는 데 도움이 됩니다.제가 수업 프로젝트(날씨 앱)를 진행하고 있었는데 HTTP를 통한 API 호출과 HTTP 호출에 S를 추가하는 것은 도움이 되지 않습니다.이 프로젝트는 큰 문제가 없습니다.@Medhi Ibrahim의 위의 메타 태그 공유가 묘기를 부립니다.

   <meta 
     http-equiv="Content-Security-Policy"   
     content="upgrade-insecure-requests" 
    />

인덱스에서 "스캐너 솔루션"을 제거하려고 했습니다.그리고 environment.prod.ts의 "s"를 제거했습니다.

제가 "http://app.finoview.com "에 로그인하면 api Nestjs가 작동합니다.

하지만 "https://finoview.com "에 로그인하려고 하면 각도는 작동하지만 api nestjs는 작동하지 않습니다.

이미지는 다음과 같습니다.

여기에 이미지 설명 입력

언급URL : https://stackoverflow.com/questions/52130918/web-api-error-this-request-has-been-blocked-the-content-must-be-served-over-h

반응형