Question

我在create-react-app上有一个localhost:3000，在:4000上有一个凤凰1.3服务器。我正在尝试在两者之间建立JWT身份验证。

当我curl我的服务器时，它可以正常工作。

$ curl -H "Content-Type: application/json" -X POST -d '{"session":{"email":"me@example.com", "password":"password"}}' http://localhost:4000/api/v1/sessions

>>> {"user":{"id":1,"handle":"me","email":"me@example.com"},"jwt":"eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJVc2VyOjEiLCJleHAiOjE1MDYxNzQ2MzcsImlhdCI6MTUwMzU4MjYzNywiaXNzIjoiQXRoZW5hIiwianRpIjoiY2I5YjgyMDMtZjMxMi00YTE2LWIwOTItZjg4NDVlNmUzYzhiIiwicGVtIjp7fSwic3ViIjoiVXNlcjoxIiwidHlwIjoidG9rZW4ifQ.mg36_4Nj2tf26ey7c72rHnZKhQBlQZeBt1CSnsua44YYndt3i9ltPA1oq_WTp58f0f6X2KqioPlrdns2O5drgQ"}

React方面看起来像这样：

import React        from 'react';
import fetch        from 'isomorphic-fetch';
import { polyfill } from 'es6-promise';

const defaultHeaders = {
  Accept: 'application/json',
  'Content-Type': 'application/json',
};

function headers() {
  return { ...defaultHeaders };
}

...
fetch("http://localhost:4000/api/v1/sessions", {
   method: 'post',
  headers: headers(),
  body: JSON.stringify({session: {email: "me@example.com", password:"password"}}),
}).then(function(response){
  console.log(response);
  alert("Pausing so browser does not refresh");
})

当我进行fetch调用时，服务器控制台输出就像curl请求成功进行一样。但是，我在fetch的第一个.then()子句中放入的任何函数似乎都没有发生任何事情。我没有看到提醒或console.log(response)。

最初我认为这是一个CORS问题，但是我在phoenix中安装了cors_plug，并在服务器上看到了所需的行为。我还在Chrome上安装了Allow-Control-Allow-Origin plugin。

我是否有关于同构获取的遗漏？（或者，是否有更多'React'方法来做到这一点？）

Answer 1

问题中代码添加的Content-Type: application/json标头会触发浏览器执行CORS preflight OPTIONS request。因此，要在curl中模拟您需要执行的操作：

curl -X OPTIONS -i -H 'Origin: http://localhost:3000' \
   -H 'Access-Control-Request-Method: POST' \
   -H 'Access-Control-Request-Headers: Content-Type' \
   http://localhost:4000/api/v1/sessions

上面的注释表明服务器使用204响应，这表明服务器至少配置为处理OPTIONS请求，因此该部分没问题。但是什么都不好：相同的注释表明服务器发送回浏览器的一个响应是400（“错误请求”），这意味着服务器从浏览器收到的请求不是服务器所期望的。

因此，您可以在浏览器devtools中打开“网络”窗格，重新加载并检查浏览器发送的POST请求的详细信息 - 确保它实际发送了Content-Type: application/json请求标头和请求正文看起来像是curl发送的内容。

没有从isomorphic-fetch（React / Phoenix）获取数据

1 个答案: