API请求报错：请求资源缺少Access-Control-Allow-Origin头问题咨询

嘿，这个CORS报错我太熟了！咱们来一步步搞定它～

问题原因 #

你遇到的是浏览器的跨域资源共享（CORS）安全限制：当你从本地开发环境http://localhost:3000请求https://api.deezer.com/chart时，对方服务器没有返回Access-Control-Allow-Origin响应头，浏览器为了安全就直接拦截了这次请求。

几种可行的解决方案 #

1. React项目内置代理（最简单的前端方案）

在你的React项目根目录的package.json里添加一行代理配置：

"proxy": "https://api.deezer.com"

然后修改你的API请求路径：

const API = "/chart"; // 本地服务器会自动把请求转发到https://api.deezer.com/chart

最后重启你的React开发服务器，这样请求就会通过本地代理转发，绕开浏览器的CORS限制。

2. 使用JSONP（适配Deezer API的方案）

Deezer API支持JSONP方式绕过CORS，你可以借助axios-jsonp-adapter实现：
首先安装依赖：

npm install axios-jsonp-adapter

然后修改你的请求代码：

import axios from 'axios';
import jsonpAdapter from 'axios-jsonp-adapter';

const {data, setData} = useState({}); 
const API = "https://api.deezer.com/chart"; 

useEffect(() => {
  axios(API, {
    adapter: jsonpAdapter
  })
  .then(response => {
    setData(response);
    console.log(response); // 注意：setData是异步的，直接log data拿不到最新值，应该log response
  })
}, []);

3. 自建后端代理服务器（更灵活的通用方案）

如果上面两种方法都不适用，你可以用Node.js+Express搭一个简单的代理服务器，让后端去请求Deezer API（后端请求不受浏览器CORS限制）：
首先安装依赖：

npm install express axios

然后创建一个proxy.js文件：

const express = require('express');
const axios = require('axios');
const app = express();
const port = 4000;

app.get('/chart', async (req, res) => {
  try {
    const response = await axios.get('https://api.deezer.com/chart');
    res.send(response.data);
  } catch (error) {
    res.status(500).send(error.message);
  }
});

app.listen(port, () => {
  console.log(`Proxy server running at http://localhost:${port}`);
});

启动代理服务器：

node proxy.js

最后修改前端的API请求路径：

const API = "http://localhost:4000/chart";

额外小提示 #

你代码里的console.log(data)在then回调里直接调用的话，因为setData是异步更新状态的，这里打印的data还是更新前的旧值。如果要查看最新的data，可以添加一个监听data变化的useEffect：

useEffect(() => {
  console.log(data);
}, [data]);

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