1

我有一个create-react-apponlocalhost:3000和一个 phoenix 1.3 服务器:4000。我正在尝试在两者之间设置 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请求成功进入一样。.then()但是，我在 fetch 的第一个子句中放置的任何函数似乎都没有发生任何事情。我没有看到警报或console.log(response).

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

关于同构提取，我有什么遗漏吗？（或者，是否有更“反应”的方式来做到这一点？）

4

1 回答 1

1

问题中代码添加的Content-Type: application/json标头会触发浏览器执行CORS 预检OPTIONS请求。所以要模仿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 中打开 Network 窗格，重新加载并检查POST浏览器发送的请求的详细信息 - 确保它实际上发送了Content-Type: application/json请求标头，并且请求的正文看起来像您发送的内容curl。

于 2017-08-30T21:25:23.970 回答