使用react-axios请求GraphQL接口遭遇CORS错误求助

错误原因分析 #

你在请求头中设置Access-Control-Allow-Origin: *是无效的——这个响应头只能由服务器端返回，用来告知浏览器允许跨域请求，客户端添加该请求头无法解决CORS限制。

另外你的GraphQL请求格式也存在问题：POST请求的GraphQL查询需要包装在JSON对象的query字段中，而非直接传递字符串。

解决方案 #

方案一：修正请求配置（优先尝试） #

调整请求格式，去掉无效的请求头，按GraphQL规范发送请求：

const characterQuery = `{
    characters(page: 2, filter: { name: "rick" }) {
      info {
        count
      }
      results {
        name
        status
        species
        gender
        image
      }
    }
  }`

const axiosInstance = axios.create({
  headers: {
    "Content-Type": "application/json" // 配置正确的请求头
  }
})

<AxiosProvider instance={axiosInstance}>
  <Post 
    url="https://rickandmortyapi.com/graphql"
    data={{ query: characterQuery }} // 将查询包装在JSON对象中
  >
    {(response: any) => {
      console.log(response);
    }}
  </Post>
</AxiosProvider>

方案二：React开发环境代理（若方案一无效） #

在项目的package.json中添加代理配置，让React开发服务器帮你转发请求绕过CORS：

"proxy": "https://rickandmortyapi.com"

然后修改请求URL为相对路径：

<Post url="/graphql" data={{ query: characterQuery }}>
  {(response: any) => {
    console.log(response);
  }}
</Post>

方案三：自定义代理中间件（复杂场景） #

如果需要更灵活的代理规则，安装http-proxy-middleware：

npm install http-proxy-middleware --save-dev

在src/setupProxy.js中添加配置：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/graphql',
    createProxyMiddleware({
      target: 'https://rickandmortyapi.com',
      changeOrigin: true,
    })
  );
};

之后同样使用相对路径/graphql发起请求即可。

注：Rick and Morty的GraphQL API本身支持CORS，优先尝试方案一即可解决问题。

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