Json 如何保护React应用程序的web服务调用？

我刚从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应用程序访问web服务的安全性。无论是在本地工作还是在部署时

我能理解CORS的问题，有很多文章告诉我问题是什么，为什么，我完全明白。我就是找不到任何解决办法

背景

• React没有任何（内置）服务器功能，因此无法连接到数据库
• 你不能让react应用程序和web服务同时运行在

  http://localhost

  它就是不起作用
• 部署时是否会遇到相同的问题，例如

  https://myreactapp.com

  正在尝试与

  https://myreactapp.com/api

  （或者类似的东西）

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

我的安全目标是饼干。简单、直观、健壮。我的意思是，如果微软和谷歌使用这种方法，它会有一些好处

因此，另一个安全问题是

• 如果您的react应用程序和web服务必须位于两个不同的域上，那么基于cookie的安全性将如何工作

我已经阅读和观看了几个小时的教程和文章，没有人解释这一部分。它们都很棒，并向您展示了如何使用react，但我正在本地同步开发react和web服务。我在C#和PHP项目中使用了相同的方法，它们都可以完美地工作，没有任何问题

我很高兴被告知我误解了，或者我完全错了，但我想请你提供一个解决方案或链接到一篇文章来支持它

显然，如果我找到了解决方案，我会把它贴在这里

你不能让react应用程序和web服务同时运行http://localhost 这就是行不通

HTTP服务器完全能够为同一来源上的不同路径提供不同的资源

例如，

/api/

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

然后，您只需将生产文件（通常设置为生成的

npm run build

）部署到一个目录中，服务器将在该目录中拾取并设置它们

显然，在处理本地开发环境时，这是很尴尬的，因为使用React development Server及其对热重新加载等的支持通常更方便

在这种情况下，有三种解决方案跃入脑海。在它们中，您将在不同的端口（例如80和3000）上运行两个HTTP服务器（API和React Development Server）

为当地发展建立CORS。不过，这确实让处理cookies变得更加尴尬

设置React开发服务器以使用代理API

---

执行反向操作并将开发API服务器配置为代理到React开发服务器。

您可以使用反向代理服务器。如果您正在开发，请使用开发服务器，例如，请参阅，让代理服务器将请求发送到安全远程服务器，而不是您的应用程序。 在生产中，您需要使用生产就绪的反向代理服务器，例如。

---

那么对于你的应用程序，不再有CORS问题。

解决了这个问题 （更新至支援职位）

---

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

我将尝试这些选项，并让您知道我的进展情况。在不同的端口上运行不起作用，这是我尝试的第一件事。我不知道你为它做了什么不在不同的端口上运行，我在用API并行开发React应用程序时经常这样做。可能您没有完成我在后面列出的三件事中的一件，而不是一句话。除了在IIS中配置它，我什么也没做。你可能是对的，我错过了一些东西，但我基本上是从我在网上找到的文章拼凑起来的。我从来没有找到一个完整的（ish）解决方案，所以我可能从来没有找到正确的组合。选项1将我分类，请参阅我的答案。在我的web.config中设置了

Access Control Allow Origin

，我的GET请求可以工作，但我的POST请求仍然存在cors问题

<?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>