0

I am getting error while making request to three endpoints using redux toolkit. I have a lot of others endpoints too they are working fine but in production its not working.

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

const tmdbApiKey = process.env.REACT_APP_TMDB_KEY;
const config = {
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Content-Type": "text/plain",
  },
};

export const tmdbApi = createApi({
  reducerPath: "tmdbApi ",
  baseQuery: fetchBaseQuery({
    baseUrl: "https://api.themoviedb.org/3",
    config,
  }),
  endpoints: (builder) => ({
    getGenres: builder.query({
      query: () => `/genre/movie/list?api_key=${tmdbApiKey}`,
    }),
    getMovies: builder.query({
      query: ({ categorieName, page, searchQuery }) => {
        // ! Get Search Result
        if (searchQuery) {
          return `/search/movie?query=${searchQuery}&page=${page}&api_key=${tmdbApiKey}`;
        }

        // ! get Movies by Category
        if (categorieName && typeof categorieName === "string") {
          return `movie/${categorieName}/?page=${page}&api_key=${tmdbApiKey}`;
        }
        // ! get Movies by Id
        if (categorieName && typeof categorieName === "number") {
          return `discover/movie?with_genres=${categorieName}&page=${page}&api_key=${tmdbApiKey}`;
        }
        // ! get Popular Movies
        return `/movie/popular?page=${page}&api_key=${tmdbApiKey}`;
      },
    }),
    getMovie: builder.query({
      query: (id) =>
        `/movie/${id}?append_to_response=videos,credits&api_key=${tmdbApiKey}`,
    }),
    // ! Get User Specific Lists
    getList: builder.query({
      query: ({ listName, accountId, sessionId, page }) =>
        `/account/${accountId}/${listName}?api_key=${tmdbApiKey}&session_id=${sessionId}&page=${page}`,
    }),
    // ! get User Specific List
    getRecommendations: builder.query({
      query: ({ id, list }) => `/movie/${id}/${list}?api_key=${tmdbApiKey}`,
    }),
    // !
    getActor: builder.query({
      query: (id) => `/person/${id}?api_key=${tmdbApiKey}`,
    }),
    getMoviesByActor: builder.query({
      query: ({ id, page }) =>
        `/discover/movie?with_cast=${id}&page=${page}&api_key=${tmdbApiKey}`,
    }),
  }),
});

export const {
  useGetMoviesQuery,
  useGetGenresQuery,
  useGetMovieQuery,
  useGetRecommendationsQuery,
  useGetActorQuery,
  useGetMoviesByActorQuery,
  useGetListQuery,
} = tmdbApi;

Thats my tmdbapi endpoints. and getting error when make request to Top Rated, Upcoming and Popular in production. The error is ** Mixed Content: The page at 'https://demoviedbapp.netlify.app/' was loaded over HTTPS, but requested an insecure resource 'http://d2nsx85y22o8i8.cloudfront.net/3/movie/popular?page=1&api_key=76265cb27f37556383131d31275d50cc'. This request has been blocked; the content must be served over HTTPS. **

Awais Raza
  • 55
  • 1
  • 9
  • The error message is pretty clear. Change the end point url to `https` – user18821127 Jul 25 '22 at 01:37
  • Its already in https and my site is working fine in Localhost but its not working in production. Problem is it converts https to http and that is causing issue. I don't know either its netlify error or not but there is something to do with this – Awais Raza Jul 25 '22 at 18:16
  • Most places I assume are served with https - but some (or 1) is not. Better to verify it and also check in Network tab on developer tools that an endpoint is not redirecting to http form https – user18821127 Jul 26 '22 at 03:55

0 Answers0