ReactJS+Typescript使用Axios请求出现跨域仅支持HTTP错误如何解决

问题根因 #

• 你的Axios请求URL未声明HTTP协议，直接写localhost:1337/reviews/会被浏览器识别为本地文件协议请求，自然触发跨域规则报错Cross origin requests are only supported for HTTP
• 你当前的useEffect未添加空依赖数组，会在组件渲染后无限重复发起请求
• 导入了函数组件不需要的constructor模块，代码存在冗余
• 组件return后未写合法的JSX内容，会引发组件渲染报错
• 缺少请求异常捕获逻辑，易触发未捕获Promise报错

修复方案 #

1. 给请求地址补全http://协议头
2. 给useEffect添加空依赖数组，确保仅在组件首次挂载时发起一次请求
3. 移除无用的constructor导入
4. 补全组件返回的合法JSX结构
5. 补充请求异常捕获逻辑

修正后的完整代码 #

import React, { FC, useEffect } from 'react'
import axios, { AxiosResponse, AxiosError } from "axios";

const HelpCenter: FC = () => {

 useEffect(() => {
   // 补全http协议头
   axios.get('http://localhost:1337/reviews/')
   .then((response: AxiosResponse) => {
      console.log(response.data);
  })
  // 补充异常捕获
  .catch((err: AxiosError) => {
    console.error('请求失败：', err.message)
  });
// 添加空依赖数组
}, []);

// 补全合法返回内容，可根据业务需求修改
return <div>帮助中心</div>

}

export default HelpCenter

图片资源加载异常修复建议 #

如果你的图片资源也是从localhost:1337服务获取，同样需要给图片的src属性补全http://协议头，不要省略协议直接写相对路径或者裸域名。

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