如何使用Axios调用Colormind API？网络错误问题的解决方法

错误截图 #

用户原代码 #

JavaScript

const url = "http://colormind.io/api/";
const data = {
    model: "default"
  }

const reloadBtn = document.querySelector('.reload-btn')


async function getColors(){
  axios.post(url,data)
  .then(response => {
    const palette = response.data.result;
     console.log(response)
  })
  .catch(error => {
    console.error(error);
  });
  
}


reloadBtn.addEventListener('click',async (e) => {
  await getColors();
})

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.4.0/axios.min.js" integrity="sha512-uMtXmF28A2Ab/JJO2t/vYhlaa/3ahUOgj1Zf27M5rOo8/+fcTUVH0/E0ll68njmjrLqOBjXM3V9NiPFL5ywWPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<button class="reload-btn">click</button>

解决步骤 #

• 改用HTTPS协议：将请求地址从http://colormind.io/api/替换为https://colormind.io/api/。当前多数网站已停止支持HTTP明文请求，若页面运行在HTTPS环境下，浏览器会直接拦截HTTP接口请求，这是导致网络错误的最常见原因。

• 规范请求格式：Colormind API要求POST请求发送JSON格式数据，显式指定请求头可避免格式兼容问题，修改后的请求代码如下：

async function getColors(){
  try {
    const response = await axios.post('https://colormind.io/api/', data, {
      headers: {
        'Content-Type': 'application/json'
      }
    });
    const palette = response.data.result;
    console.log(palette);
  } catch (error) {
    console.error(error);
  }
}

• 避免file://协议限制：若直接打开本地HTML文件（以file://开头），浏览器会施加严格的跨域限制，建议使用本地服务器（如Node.js的http-server、Python的SimpleHTTPServer）运行页面，即可正常发送请求。

• 检查调用频率：Colormind API存在调用次数限制，短时间内频繁请求会被服务器拒绝，若以上步骤无效，可暂停一段时间后再尝试。

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