React应用调用Facebook页面接口出现No 'Access-Control-Allow-Origin' CORS错误

问题根因 #

1. 你当前请求的是Facebook页面的前端网页地址，不是官方开放的Graph API接口，Facebook不会对第三方前端域名开放跨域响应头，所以跨域报错是必然结果
2. 你在fetch请求头中添加Access-Control-Allow-Origin是错误操作，这个头是服务端返回给浏览器的响应头，前端请求侧添加完全不生效
3. 你安装的CORS npm包是给Node.js后端接口配置跨域用的，和前端调用第三方接口的跨域问题没有关联

解决步骤 #

第一步：确认调用的是官方Graph API接口 #

要获取Facebook页面动态，正确的请求地址格式为：
https://graph.facebook.com/v18.0/{你的页面ID}/feed?access_token={你的访问令牌}
你需要先在Facebook for Developers后台生成页面访问令牌，你的测试页面ID就是原URL中的170107151801959。

第二步：解决跨域问题，两种可选方案 #

方案A：使用Facebook官方JS SDK调用（推荐，无需额外处理跨域）

你代码中已经声明了全局FB对象，直接用FB.api方法拉取数据即可，不需要自己写fetch请求：

// 先确保你已经在项目入口index.html中正确引入Facebook JS SDK，并且完成了初始化授权操作
FB.api('/170107151801959/feed', 'GET', { fields: 'id,message,created_time,full_picture' }, (response) => {
  if (response && !response.error) {
    // 拿到数据后直接赋值给数据源即可
    console.log('页面动态数据：', response.data)
  } else {
    console.error('拉取数据错误：', response.error)
  }
})

你原来构造的CustomStore可以直接修改load方法，适配FB.api返回结果：

ordersData: new CustomStore({
  key: 'id',
  load: () => {
    return new Promise((resolve, reject) => {
      FB.api('/170107151801959/feed', 'GET', { fields: 'id,message,created_time' }, (res) => {
        if (res.error) return reject(res.error)
        resolve(res.data)
      })
    })
  }
})

方案B：用本地Node.js服务做代理转发

如果你不想使用官方SDK，可以自己写一个Node.js后端接口，由后端去请求Facebook Graph API，前端只需要请求自己的Node.js接口即可：

1. 给你的Node.js服务配置跨域：

// 后端Node.js代码示例
const express = require('express')
const cors = require('cors')
const axios = require('axios')
const app = express()
app.use(cors()) // 允许前端跨域调用当前服务接口

app.get('/api/facebook/feed', async (req, res) => {
  try {
    const fbRes = await axios.get('https://graph.facebook.com/v18.0/170107151801959/feed', {
      params: {
        access_token: '你的Facebook页面访问令牌'
      }
    })
    res.json(fbRes.data)
  } catch (err) {
    res.status(500).json(err)
  }
})
app.listen(3001, () => console.log('代理服务运行在3001端口'))

2. 前端把请求地址改成http://localhost:3001/api/facebook/feed即可，不需要再加多余的请求头配置。

第三步：调整DataGrid配置 #

拿到返回的Facebook动态数据后，根据你要展示的字段，给DataGrid配置对应的Column列即可，如果只需要展示数据可以先关掉Editing配置。

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