Reactjs 如何修复使用Apollo客户端查询Yelp GraphQL API时的身份验证错误

我正在尝试创建一个基本的react应用程序，它使用Apollo客户端查询Yelp GraphQL API

当我试图发送一个查询时，我收到一个401错误响应

我已经加入了Yelp的开发者测试计划，并尝试刷新我的API密钥，但没有成功。下面是我的index.js文件的代码

import React from 'react'
import ReactDOM from 'react-dom'
import {ApolloProvider} from 'react-apollo'
import { ApolloClient } from "apollo-client";
import { createHttpLink } from "apollo-link-http";
import { setContext } from "apollo-link-context";
import { InMemoryCache } from "apollo-cache-inmemory";
import './index.css'
import App from './App'
import registerServiceWorker from './registerServiceWorker'

const httpLink = createHttpLink({
  uri: "https://api.yelp.com/v3/graphql",
  fetchOptions: {
    mode: "no-cors"
  }
});

const authLink = setContext((_, { headers }) => {
  const token = process.env.yelpApiKey;
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
      "Content-Type": "application/graphql"
    }
  };
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
});

ReactDOM.render(
    <ApolloProvider client={client}>
      <App/>
    </ApolloProvider>
  , document.getElementById('root'));
registerServiceWorker();

从“React”导入React
从“react dom”导入react dom
从'react apollo'导入{ApolloProvider}
从“apollo客户端”导入{apollo客户端}；
从“apollo链接http”导入{createHttpLink}；
从“阿波罗链接上下文”导入{setContext}；
从“apollo缓存inmemory”导入{InMemoryCache}；
导入“./index.css”
从“./App”导入应用程序
从“./registerServiceWorker”导入registerServiceWorker
const httpLink=createHttpLink({
uri:“https://api.yelp.com/v3/graphql",
获取选项：{
模式：“无cors”
}
});
const authLink=setContext（（{headers}）=>{
const token=process.env.key；
返回{
标题：{
…标题，
授权：令牌？`Bearer${token}`:“”，
“内容类型”：“应用程序/graphql”
}
};
});
const客户端=新客户端({
链接：authLink.concat（httpLink），
缓存：新的InMemoryCache（）
});
ReactDOM.render(
，document.getElementById（'root'）；
registerServiceWorker（）；

我是不是遗漏了什么？任何建议都将不胜感激

---

谢谢

我也有同样的问题，到目前为止，我认为这里的问题是Yelp不支持CORS，即使我们不使用CORS，它也没有帮助。 您可以查看下面的讨论

我是YELP API的新手，在Apollo客户端方面并没有太多经验。但我的工作解决方案如下。我不会把这个项目仅仅用于开发目的。我用herokuapp激活cors

const cache = new InMemoryCache();
// Seting up Apollo Client
const client = new ApolloClient({
  uri: 'https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/graphql',
  request: (operation) => {
    operation.setContext({
      headers: {
        Authorization: `Bearer ${apiKey}`,
        'Accept-Language': 'en-US',
      },
    });
  },
  cache,
});

在这个解决方案中，我不得不使用

'Accept-Language'：'en-US'，

，因为如果没有它，我会得到一个错误400错误请求，即使en-US也是默认的

code: "INVALID_LOCALE"
description: "The locale you specified is not valid."

也许你注意到我没有具体说明

“内容类型”：“应用程序/graphql”

这是因为我们又收到了400个错误请求。Apollo客户端默认值有一个内容类型“application/json”，当我们指定“application/graphql”时，它将覆盖。 你可以在下面阅读关于这方面的有益讨论

另外，您可以查看下面的屏幕截图

---

我希望这能对某人有所帮助，我知道可能会有更好的解决方案，如果我改进这一方案，我会让你知道

我也有同样的问题，到目前为止，我认为这里的问题是Yelp不支持CORS，即使我们不使用CORS，它也没有帮助。 您可以查看下面的讨论

我是YELP API的新手，在Apollo客户端方面并没有太多经验。但我的工作解决方案如下。我不会把这个项目仅仅用于开发目的。我用herokuapp激活cors

const cache = new InMemoryCache();
// Seting up Apollo Client
const client = new ApolloClient({
  uri: 'https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/graphql',
  request: (operation) => {
    operation.setContext({
      headers: {
        Authorization: `Bearer ${apiKey}`,
        'Accept-Language': 'en-US',
      },
    });
  },
  cache,
});

在这个解决方案中，我不得不使用

'Accept-Language'：'en-US'，

，因为如果没有它，我会得到一个错误400错误请求，即使en-US也是默认的

code: "INVALID_LOCALE"
description: "The locale you specified is not valid."

也许你注意到我没有具体说明

“内容类型”：“应用程序/graphql”

这是因为我们又收到了400个错误请求。Apollo客户端默认值有一个内容类型“application/json”，当我们指定“application/graphql”时，它将覆盖。 你可以在下面阅读关于这方面的有益讨论

另外，您可以查看下面的屏幕截图

---

我希望这能对某人有所帮助，我知道可能会有更好的解决方案，如果我改进这一方案，我会让你知道

嘿，伙计！你能试着提供一个错误，或者为什么它不起作用？任何调试消息。您是否尝试过调试，尝试了什么？控制台中唯一的错误消息是“加载资源失败：服务器响应状态为api.yelp.com/v3/graphql:1 401（）”。我不太确定我可以采取什么步骤来调试。您有什么建议吗？错误401表示未经授权，因此可能是API密钥的问题。尝试调试并查看API密钥是否正确。检查请求并确保所有标题都正确嘿，我也有同样的问题，就我目前的理解而言，问题在于Yelp和他们的Graphql服务器。一旦您激活“无cors”，您就可以以服务器拒绝的方式发送请求。看，嘿，伙计！你能试着提供一个错误，或者为什么它不起作用？任何调试消息。您是否尝试过调试，尝试了什么？控制台中唯一的错误消息是“加载资源失败：服务器响应状态为api.yelp.com/v3/graphql:1 401（）”。我不太确定我可以采取什么步骤来调试。您有什么建议吗？错误401表示未经授权，因此可能是API密钥的问题。尝试调试并查看API密钥是否正确。检查请求并确保所有标题都正确嘿，我也有同样的问题，就我目前的理解而言，问题在于Yelp和他们的Graphql服务器。一旦您激活“无cors”，您就可以以服务器拒绝的方式发送请求。看见