程序员经验分享-hwhale

使用 SWAPI（星球大战 API）的 React 项目出现混合内容错误

2024-02-01

我构建一个 React 项目只是为了尝试一些东西，我在使用时遇到问题SWAPI（星球大战 API） https://swapi.dev/.

我不断收到Mixed Content Error当我尝试在我的 React 项目中通过 axios 使用他们的 API 时。

Mixed Content: The page at 'https://zlerp.github.io/react-StarWars/#/people/2' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://swapi.dev/api/people/3/'. This request has been blocked; the content must be served over HTTPS.

即使我用硬编码 URLhttps://swapi.dev/api/people/3/，我仍然收到混合内容错误。

非常感谢任何和所有的帮助。

您可以在这里看到错误：https://zlerp.github.io/react-StarWars/#/people/3 https://zlerp.github.io/react-StarWars/#/people/3

React 组件发出请求

I am just using Axios and the hardcoded URL with https. enter image description here

请求标头

The response Location is showing http could that be something to do with the issue? if so how can I change this? enter image description here

调用栈

The Call Stack shows that it is going through the Person.js file shown in the first image and you can see the line numbers there. enter image description here


这与以下事实有关：API 是通过 http 提供的，而您的网站是通过 https 加载的，因此浏览器会阻止该请求。

由于您无法控制第 3 方 api，因此您可以通过添加元标记来解决问题<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

ReactJS

axios

mixedcontent

使用 SWAPI（星球大战 API）的 React 项目出现混合内容错误 的相关文章

  • 移动浏览器中的 React 性能

    我有一个组件 表 其中包含许多行 其中包含数据编辑 其掩码形式为contenteditable 可以选择所有字段并同时更改所有行 在桌面上它运行得相当快 但在 iPhone 6 上我有不真实的滞后 Safari 每次操作都会挂起 20 秒

  • 在React组件中使用的字符串变量中插入html

    我正在为我的投资组合网站构建一个反应应用程序 目前我已经用 JSX 编写了应用程序 因此我可以添加以下内容 class Project extends React Component render return div h1 this pr

  • Facebook SDK 登录/注销 ngrok

    我正在尝试将我正在构建的网络应用程序与 Facebook 集成 Facebook 现在要求所有 API 调用都必须从 https 站点进行 我正在构建的这个应用程序只是为了好玩 所以我使用的是 localhost 我在用着ngrok将我的请

  • React this.state 未定义？

    我正在遵循 Pluralsight 的初学者教程 在表单提交时将值传递给addUser组件方法 我需要将 userName 推送到this state users但我收到错误 App jsx 14 Uncaught TypeError Ca

  • （节点：20732）[DEP0018] DeprecationWarning：未处理的承诺拒绝已被弃用。未来在nodejs中

    我正在尝试在我的应用程序中生成确认链接 虽然它工作正常并且也生成链接 但是当我访问该链接时 它在 Chrome 控制台中显示 POST http localhost 3000 api auth confirmation 400 Bad Re

  • 如何在react-select v2中创建optgroup？

    我想在我的反应选择列表中包含 optgroups 但它似乎没有记录在任何地方 我有以下结构 是从评论中提取的https github com JedWatson react select issues 59 https github com

  • 你如何在react-native中实现捏合缩放？

    我一直在研究 PanResponder 我当前的工作假设是 我将检测是否有两个触摸正在向外移动 如果是 则增加元素大小onPanResponderMove功能 这似乎是一种混乱的方法 有没有更顺畅的方法呢 如果您只需要简单的捏缩放功能 只需

  • 当 deps 为 [] 时，React 警告 React Hook useEffect 缺少依赖项

    我正在尝试清理 DOM 中的警告 并且对于每个useEffect部门在哪里 我收到一条错误消息 指出 useEffect 缺少依赖项 我想在安装组件时触发效果 我的印象是这就是做到这一点的方法 如果是这样 为什么会出现警告 这是我使用的简单

  • 在这个反应示例中，bind 做了什么？

    什么是bind在这个声明中做this tick bind 这个 在下面的代码中 export class Counter extends React Component constructor props super props this

  • css-loader 不导入 .css 文件返回空对象

    从 css 文件导入样式 返回空对象 看来 css loader 无法正常工作 谁可以帮我这个事 请找到下面的参考文件 index js import React from react import style from header cs

  • 尝试在 React 应用程序中连接到 MySQL 数据库时，无法读取未定义的属性（读取“查询”）错误

    我正在尝试连接到 MySQL 数据库并在单击按钮后在 React 应用程序中运行查询 一些它如何给出错误 我当前的代码如下所示 import mysql from mysql function App async function sync

  • 如何判断何时创建新组件？

    我一直在寻找背后的逻辑当有人在 AngularJS Angular 上的 Web 应用程序中创建新组件时但我认为这更通用 可能适用于所有基于组件的前端框架 我知道有像这样的一些原则应该是抽象的和可重用的但例如我在角度文档中看到 每个单独的路

  • 以编程方式更改 Redux-Form 字段值

    当我使用redux formv7 我发现没有办法设置字段值 现在在我的form 我有两个select成分 当第一个时 第二个的值就会很清楚select元件值改变 在类渲染中 div div site div div div div

  • 如何发送和接收大型 JSON 数据

    我对全栈开发比较陌生 目前正在尝试找出一种有效的方法send and fetch我的前端 React 和后端 Express 之间存在大量数据 同时最大限度地减少内存使用 具体来说 我正在构建一个地图应用程序 它需要我处理大型 JSON 文

  • 为什么我的反应路由器链接将我带到页面中间？

    我的网站上有很多链接 但只有一个可以执行此操作 它没有将我带到导航栏的顶部 而是转到内容的中间 知道为什么会这样吗 这是一个页面 其中有一个 map经历一些JSON 这是渲染div页面下方的文本元素 如果重要的话 这是一些可能相关的代码 路

  • 我点击的号码没有出现在反应项目的屏幕上

    当我尝试在屏幕中呈现点击的数字时 该数字没有出现 但它确实可以在控制台中显示 我不知道如何修复它应该在屏幕上 号码 旁边应用的号码 import render from testing library react import React

  • 这种类型注释在没有 TypeScript 的 React 代码中如何工作？

    我在看这段代码示例 https reacttraining com react router web example auth workflow在 ReactRouter 页面上 这篇文章很有趣 const PrivateRoute com

  • React JS 服务器端问题 - 找不到窗口

    你好 我正在尝试在我的reactJS项目中使用react rte 我有服务器端渲染 每次我想使用这个包时 我都会得到 return msie 6 9 b test window navigator userAgent toLowerCase

  • 使用 ref 触发反应 dropzone 不起作用

    我正在实现这个库 https github com felixrieseberg React Dropzone Component https github com felixrieseberg React Dropzone Compone

  • 如何映射轮播的子项数组？

    我正在尝试将 Carousel 组件包装在映射对象数组周围作为组件的子级 目前我只能让映射创建映射对象的 1 个子对象 轮播需要像这样

随机推荐

热门标签