你如何保护来自 React 应用程序的 Web 服务调用？

Question

我刚开始使用 React，看看有什么大惊小怪的。在遇到 JSON Web 服务和安全性之前，我印象非常深刻。我正在尝试 fetch 和 axios。

所以有两个问题和一些背景知识。

如何使用 React 访问本地 Web 服务并避免“不透明”响应问题。

//react app running on http://localhost:3000
const result = await fetch("http://localhost/api/data.php", { mode: "no-cors" });//opaque response
//this doesn't work either, I get the cors error
//const result = await fetch("http://localhost/api/data.php");//opaque
const json = await result.json();
....

你如何保护从 React 应用程序访问你的网络服务。无论是在本地工作还是在部署时。

我可以理解 CORS 等问题，我可以找到很多文章告诉我问题是什么以及为什么，我完全明白了。我只是找不到任何解决方案。

背景

React 没有任何（内置的）服务器功能，因此无法连接到数据库。
你似乎无法在 http://localhost 上同时打开你的 React 应用程序和你的网络服务运行它只是行不通。
部署时我会遇到同样的问题吗？ https://myreactapp.com 试图与 https://myreactapp.com/api（或类似的人）交谈。

每一个教程、文章和示例都使用本地 JSON 文件或外部不相关 URL 来获取 JSON 数据这一事实似乎证明了这一点. 此外，我找不到任何甚至暗示它甚至可能的东西，这会引发安全问题。

我的安全首选是 cookie。简单直接和健壮。我的意思是，如果 Microsoft 和 Google 使用这种方法，它会取得一些进展。

所以还有一个安全问题是

如果您的 React 应用程序和 Web 服务必须位于两个不同的域中，那么我基于 cookie 的安全性将如何工作？

我已经阅读并观看了几个小时的教程和文章，none 解释了这部分内容。它们都很棒，并向您展示了如何开始使用 React，但我正在本地同时开发 React 和 Web 服务。我对 C# 和 PHP 项目使用了相同的方法，并且都完美无缺地工作。

我很高兴得知我被误解了或者我完全错了，但我会要求您提供解决方案或 link 文章以支持它。

显然，如果我找到解决方案，我会 post 在这里。

Answer 1

You can't seemingly have your react app on and your web service both running on http://localhost it just won't work.

HTTP 服务器完全有能力为同一来源的不同路径提供不同的资源。

例如，/api/ 路径可以由某些服务器端编程处理，而其他所有内容都作为静态文件提供。

然后您只需将生产文件（npm run build 通常设置为生成）部署到一个目录，该服务器将在该目录中获取并设置它们。

在处理本地开发环境时，这显然很尴尬，因为通常使用支持热重载等的 React Development Server 更方便。

在这种情况下，我会想到三种解决方案。在它们中的每一个中，您将运行两个 HTTP 服务器（API 和 React Development Server）在不同的端口（例如 80 和 3000）上。

为本地开发设置 CORS。不过，这确实让处理 cookie 变得更加尴尬。

设置 React Development Server 以使用 the options in the configuration file 代理 API。

执行相反的操作并配置您的开发 API 服务器以代理到 React 开发服务器。

Answer 2

您可以使用反向代理服务器。如果您正在开发，请使用 webpack-dev-server, See here 等开发服务器，让代理服务器将请求发送到安全的远程服务器，而不是您的应用程序。在生产中，您需要使用生产就绪的反向代理服务器，例如nginx。然后对于您的应用程序，不再有 CORS 问题。

Answer 3

解决了这个问题https://enable-cors.org/server_iis7.html （已更新以支持 POST）

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
                <add name="Access-Control-Allow-Methods" value="POST, GET, OPTIONS, DELETE" />
                <add name="Access-Control-Max-Age" value="3600" />
                <add name="Access-Control-Allow-Headers" value="Content-Type, Origin, Cache-Control, X-Requested-With" />
                <add name="Access-Control-Allow-Credentials" value="true" />       
            </customHeaders>
    </httpProtocol>
    </system.webServer>
</configuration>

快速重置 IIS，然后我们开始

你如何保护来自 React 应用程序的 Web 服务调用？

How do you secure a web service call from a React App?

json

cors

reactjs

opaque-result-type