0

问题是我总是收到没有任何有效负载的 400 响应代码。即使出现问题，graphql 也会使用代码 200 和带有错误块的有效负载。事实上，GraphiQl 工作正常，告诉我设置和架构是正确的。所以......我被困住了。也许，任何想法，在哪里看？

我不认为它失败是因为 cors 本身。我的应用在DRF下运行良好。我决定为我尝试新的技术并使用 GQL 覆盖应用程序。

我的起源：http: //127.0.0.1 :8080

这是我的阿波罗客户：

const cache = new InMemoryCache();
const link = new HttpLink({
  uri: "http://127.0.0.1:8000/graphql/",
  credentials: "include", // cookies enabled
  headers: {
    "X-Csrftoken": getTokenCsrf(),  
    "Content-Type": "application/json"
  },
  fetchOptions: {
    mode: "cors"
  }
});

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

有我的要求（通过状态来自表单的变量值）：

const AUTH_QUERY = gql`
  mutation TokenAuth($username: String!, $password: String!) {
    tokenAuth(username: $username, password: $password) {
      token
    }
  }
`;

我使用 react-apollo-hook 来执行查询：

const [sendCreds, loading, error] = useMutation(AUTH_QUERY);
const handleSubmit = e => {
    sendCreds({
      variables: { username: state.username, password: state.password }
    });
};

我的架构（根据文档）：

class Mutation(graphene.ObjectType):
    token_auth = graphql_jwt.ObtainJSONWebToken.Field()
    verify_token = graphql_jwt.Verify.Field()
    refresh_token = graphql_jwt.Refresh.Field()

schema = graphene.Schema(query=Query, mutation=Mutation)

从 GraphiQL 处理这个查询会给我一个有效的响应。GraphiQL 在浏览器的另一个选项卡上的http://127.0.0.1:8000/graphql上运行。

询问：

mutation TokenAuth($username: String!, $password: String!) {
  tokenAuth(username: $username, password: $password) {
    token
  }}

变量：

   {"username": "qwerty", "password": "qwerty"}

回复：

{
  "data": {
    "tokenAuth": {
  "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VybmFtZSI6InF3ZXJ0eSIsImV4cCI6MTU2NjMwMTkwNiwib3JpZ0lhdCI6MTU2NjMwMTYwNn0.NzgecEfFcnsrudcgrlZyBCC1rutoVJFciUI-ugFq9Fg"
    }}}
4

1 回答 1

0

所以，问题就解决了。不要忘记，当您按下没有明确定义类型的按钮时，将使用“提交”类型。

<form >
  <div className="input-field">
    <input type="text" id="username" />
    <input type="password" id="password" />        
    <button
      type="button"  // that string solved my problem.
      onClick={handleSubmit}
    >
      {msg}
    </button>      
  </div>
</form>

当您按下提交类型的按钮时，会调用 render 并响应尝试将内容分派到未安装的组件。但是，如果您的按钮类型为“按钮”，则请求可以正常工作。我希望我的折磨能节省别人的时间。

于 2019-08-21T14:34:57.180 回答