React+Redux Toolkit调用TMDB API在Netlify生产环境遇混合内容错误

问题现象 #

调用TMDB的Top Rated、Upcoming、Popular三个接口时，Netlify生产环境触发Mixed Content错误：

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.

其他TMDB接口可正常运行。

问题分析 #

错误显示请求被重定向到HTTP协议的CloudFront域名，而非TMDB官方HTTPS域名，核心原因：

1. 接口路径存在多余斜杠，触发异常重定向；
2. 浏览器安全策略禁止HTTPS页面加载HTTP资源，导致请求被拦截；
3. 前端错误设置服务器端专属响应头，干扰请求处理逻辑。

解决方案 #

1. 修正接口路径的多余斜杠 #

在getMovies端点的分类请求逻辑中，移除路径末尾的多余斜杠：

getMovies: builder.query({
  query: ({ categorieName, page, searchQuery }) => {
    // ...其他逻辑
    if (categorieName && typeof categorieName === "string") {
      // 移除末尾斜杠，避免触发异常重定向
      return `/movie/${categorieName}?page=${page}&api_key=${tmdbApiKey}`;
    }
    // ...其他逻辑
  },
}),

2. 优化fetchBaseQuery配置 #

• 删除无效的Access-Control-Allow-Origin头（该头由服务器设置，前端配置无意义）；
• 配置fetch函数强制重定向请求使用HTTPS；
• 修正Content-Type为接口要求的application/json。

修改后的完整配置代码：

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

const tmdbApiKey = process.env.REACT_APP_TMDB_KEY;

export const tmdbApi = createApi({
  reducerPath: "tmdbApi", // 移除多余空格
  baseQuery: fetchBaseQuery({
    baseUrl: "https://api.themoviedb.org/3",
    prepareHeaders: (headers) => {
      headers.set("Content-Type", "application/json");
      return headers;
    },
    // 强制重定向请求使用HTTPS
    fetchFn: async (url, options) => {
      let response = await fetch(url, options);
      if (response.url.startsWith("http://")) {
        response = await fetch(response.url.replace("http://", "https://"), options);
      }
      return response;
    },
  }),
  endpoints: (builder) => ({
    getGenres: builder.query({
      query: () => `/genre/movie/list?api_key=${tmdbApiKey}`,
    }),
    getMovies: builder.query({
      query: ({ categorieName, page, searchQuery }) => {
        if (searchQuery) {
          return `/search/movie?query=${searchQuery}&page=${page}&api_key=${tmdbApiKey}`;
        }
        if (categorieName && typeof categorieName === "string") {
          return `/movie/${categorieName}?page=${page}&api_key=${tmdbApiKey}`;
        }
        if (categorieName && typeof categorieName === "number") {
          return `discover/movie?with_genres=${categorieName}&page=${page}&api_key=${tmdbApiKey}`;
        }
        return `/movie/popular?page=${page}&api_key=${tmdbApiKey}`;
      },
    }),
    getMovie: builder.query({
      query: (id) =>
        `/movie/${id}?append_to_response=videos,credits&api_key=${tmdbApiKey}`,
    }),
    getList: builder.query({
      query: ({ listName, accountId, sessionId, page }) =>
        `/account/${accountId}/${listName}?api_key=${tmdbApiKey}&session_id=${sessionId}&page=${page}`,
    }),
    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;

3. 额外检查项 #

• 确认Netlify生产环境中REACT_APP_TMDB_KEY环境变量配置正确；
• 确保所有请求均基于TMDB官方HTTPS域名，避免第三方HTTP重定向地址。

验证 #

修改完成后重新部署到Netlify，测试Top Rated、Upcoming、Popular接口，确认请求地址为HTTPS协议，混合内容错误消失。

内容的提问来源于stack exchange，提问作者Awais Raza