Question

我有一个客户端React应用程序和一个Rails API，React应用程序从中获取数据。

正如您所料，我只希望我的React应用程序能够从API获取数据，而世界其他地方应该无法从中接收数据。

尽管进行了大量搜索，但我还没有找到确保两个应用程序之间通信的最佳方法。

我已经阅读了有关JWT令牌和基于cookie的会话身份验证，但大多数文章似乎都专注于用户身份验证（即登录/注销）而不是仅仅是两个应用程序之间的通信。

这两个应用程序将共享同一个域，因此足以依靠Cross Origin来保护通信吗？

任何建议真的很值得赞赏。

Answer 1

如果我的问题正确，您希望您的客户端（React App）成为唯一可以访问您服务器的客户端。

作为解决方案，您必须具有CORS和JWT授权的组合，因此我建议使用严格的CORS来仅启用您的反应应用程序的域来调用服务器。为实现这一目标，我通常在服务器上使用CORS npm模块和configure来源，或者您也可以自己做。

var express = require('express')
var cors = require('cors')
var app = express()

var corsOptions = {
  origin: 'http://example.com',
  optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204 
}

上述代码仅允许来自example.com的请求被服务器接受，或者查看this code以获得更加动态的白名单＆amp;黑名单方法。

现在回到JWT，它只是一个json加密和解密令牌，它可以跨API请求共享以进行身份验证以及授权用户。

例如，您可以在JWT中存储用户的电子邮件，角色和昵称等信息，并在每个API请求中发送此加密的JWT，服务器会授权此请求，如果为true，则转发给请求的API。这种授权和转发过程通常使用“拦截器”来实现。模式，其中中间件（Passport oAuth）在每次API调用之前进行检查和验证。

执行上述两项操作将确保只有具有有效JWT令牌和域地址的客户端才允许与服务器通信。这个客户端将是您的反应应用程序，因为它是唯一一个具有正确的JWT和原始地址的应用程序。

所以现在你的反应应用程序应该只确保在API调用中传递适当的JWT令牌（post / get / put），最有可能在API请求的标题中，你可以有一个API帮助程序服务来执行此操作为您而导入组件，无论您进行API调用。并且您的节点服务器将实现护照中间件模式以授权此JWT并过滤未授权的请求。

如果您认为应用程序没有登录，JWT也可以是客户端ID，它可以识别您的客户是合法的。就像用户登录一样，您可以让应用程序使用像秘密客户端ID这样的数据来调用服务器。这将返回一个JWT令牌。或者您可以预先生成JWT令牌，并在第一次加载时对应用程序存储它，并通过设置TTL和另一个配置，您可以检查正在调用您的服务器的客户端是旧的还是新的或其他一些假客户。

HTH

Answer 2

跨域域的情况是您可能需要实现CORS和黑名单之类的安全性。 JWT略有不同，正如您所说，需要访问您的api的用户身份验证。

我相信只要您不在服务器上启用CORS，就可以了。

请注意，这不会阻止人们执行以下操作：

https://example.com/api/blah访问api的一部分（如果是公开的）。这与您的前端执行相同操作基本相同，因为客户端是为用户提供的，然后用户可以完全控制客户端。他们可以将您应用中的api调用的所有实例更改为不同的端点，但您无法阻止它们，就像他们可以在网址栏中键入它一样。你的api上的任何公共端点都不得共享敏感信息。

如何保护客户端应用程序（反应）和API通信

2 个答案: