API请求被阻止，内容必须通过HTTPS提供

Question

I have created an angular app using an api call. I have deployed it in github pages. Then when every api call I get this error message .

getList(input) {

  const url = '/api.themoviedb.org/3/search/movie/?api_key=b6dba21fefcead3510c8ddf58eb57d43&query=' + input;
  return this.httpClient.get<RootResult>(url);
}

I the dev tool console I get this error:

Mixed Content: The page at 'https://githamza.github.io/ngxs-app-example/home' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.themoviedb.org/3/search/movie?api_key=b6dba21fefcead3510c8ddf58eb57d43&query=l'. This request has been blocked; the content must be served over HTTPS.

I'm using a relative path in my api but it adds always http instead of https

Here's my github page example : https://githamza.github.io/ngxs-app-example

Answer 1

Your API is behind http, so you cant call http api from your https (client) App, It violate the https security policy.. both app and api should be in same protocol

Update : Change url to like following

const url = 'https://api.themoviedb.org/3/search/movie/?api_key=b6dba21fefcead3510c8ddf58eb57d43&query=' + input;

Answer 2

使用https！

const url = 'https://api.themoviedb.org/3/search/movie/?api_key=b6dba21fefcead3510c8ddf58eb57d43&query=' + input;