没有从同构获取中取回数据 (React/Phoenix)

Question

我在 localhost:3000 上有一个 create-react-app，在 :4000 上有一个 phoenix 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/jsonheader触发浏览器做了一个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（“错误请求”），这意味着服务器从浏览器收到的请求不是服务器所期望的。

因此您可以在浏览器开发工具中打开网络窗格，重新加载并检查浏览器发送的 POST 请求的详细信息——确保它确实发送了 Content-Type: application/json 请求 header并且请求的 body 看起来像您使用 curl.

发送的内容

没有从同构获取中取回数据 (React/Phoenix)

Not getting data back from isomorphic-fetch (React/Phoenix)

cors

reactjs

phoenix-framework

fetch-api

isomorphic-fetch-api