React 中的 Fetch 在 url 之前添加 localhost答案

【问题标题】：Fetch in React adds localhost before the urlReact 中的 Fetch 在 url 之前添加 localhost
【发布时间】：2020-12-24 14:08:28
【问题描述】：

我正在使用 fetch 通过 GET 请求读取一些数据。

类似这样的：

  fetch(
    'myurl.com/data',
    requestOptions
  )
    .then((response) => response.text())
    .then((result) => console.log(result))
    .catch((error) => console.log('error', error));

我在邮递员中测试过，它工作正常，它返回数据。

问题是当我在浏览器中调用它时，它返回的是 HTML 而不是 JSON。

在 Dev Tools -> Network -> Initiator 中，url 看起来不同，它在开头添加了“localhost...”

像这样：http://localhost:3000/store/orders/myurl.com/data。正因为如此，url 被破坏了，它不返回 JSON。

项目中没有http://localhost:3000/store/orders，在package.json这一行："homepage": "/store/orders/"。

有没有办法解决这个问题？

【问题讨论】：

myurl.com 的确切值是多少？
使用http://myurl.com/data没有myurl.com/data
在网址前添加http://或https://

标签： javascript reactjs localhost fetch package.json

【解决方案1】：

尽量不要省略协议部分http://，这样您的 fetch 调用将如下所示：

 fetch(
    'http://myurl.com/data',
....

【讨论】：

我添加了该部分，它现在抛出此错误：CORS 策略已阻止从源 'localhost:3000' 获取 'myurl.com/data' 的访问权限：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。
是的，这是预期的行为（还有一个不同的问题供您研究）。给你方向：
选项如何解决这个问题： 1. 部署您的项目，设置 TLS 并使用 https 协议 2.（测试）将 myurl.com 添加到您的 chrome 浏览器设置中的可信来源 3.（测试）hack服务器端（myurl.com）临时的 CORS 策略这是另一个大问题，做单独的研究......基本上这是 google chrome 为安全所做的事情。
我添加了 requestOptions: mode: 'no-cors' 并且该错误不再出现。现在它只是一条简短的错误消息：net::ERR_ABORTED 400
检查 preflight OPTIONS 请求是否成功（显示在 chrome 开发者工具网络选项卡中）。