apollo-link-rest 设置标头答案

【问题标题】：appolo-link-rest set headerapollo-link-rest 设置标头
【发布时间】：2019-03-08 22:30:21
【问题描述】：

编辑：下面描述的问题是我使用的 api 的问题......不是 apollo 的问题。

我正在尝试将apollo-link-rest 与在标题中设置的 api-key 一起使用。如果我尝试使用完全相同的 api 端点并将 api-key 设置为 Postman 应用程序中的标头，它工作得非常好。但不适用于apollo-link-rest：

import { AppContainer } from 'react-hot-loader';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './react-components/App';
import PropTypes from 'prop-types';
import { RestLink } from "apollo-link-rest";
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloProvider } from 'react-apollo';
import 'normalize.css/normalize.css';
import './index.css';

const restLink = new RestLink({
    uri: 'https://a-site.net/api',
    headers: {
        'x-someapikey': '012737465334232522z2z22163r43'
    },
});

const client = new ApolloClient({
  link: restLink,
  cache: new InMemoryCache(),
});

我做错了什么？

这是在 Chrome Devtools 中打印的请求标头：

我在浏览器 (Apollo) 中收到 401 错误...但是当我在 Postman 应用程序中使用具有相同标头的相同端点时...它可以工作！

【问题讨论】：

你能在浏览器中检查网络请求吗？是否确实缺少标头，还是由于其他原因请求失败？
@DanielRearden 我添加了一些与您的问题相关的更多信息。
由于您使用的是客户标头，我相信浏览器会发送预检 OPTIONS 请求。那是失败的请求吗？您的服务器是否配置为处理预检请求？

标签： javascript reactjs http-headers apollo apollo-link-rest

【解决方案1】：

这是 API 的问题......不是 Apollo。

【讨论】：

【解决方案2】：

你可以试试这个吗？我的回答基于此：https://www.apollographql.com/docs/link/links/rest.html#context

var myHeaders = new Headers();
myHeaders.append('x-someapikey', '012737465334232522z2z22163r43');

const restLink = new RestLink({
    uri: 'https://a-site.net/api',
    headers: myHeaders
});

【讨论】：