从同一服务器获取数据。使用什么网址？答案

【问题标题】：Fetching data from the same server. What url to use?从同一服务器获取数据。使用什么网址？
【发布时间】：2019-10-26 20:24:49
【问题描述】：

我有一个托管在 DigitalOcean 液滴上的反应网站。我还有一个 node.js 服务器在同一个 droplet 上运行。从后端获取时，我应该用什么 url 替换？

从我的计算机本地运行我的前端和后端时，该网站正确获取数据。在本地工作时，我在获取数据时使用了 url http://localhost:3000/users。我尝试了很多不同的 url，但在服务器上尝试时它们都不起作用。这只是一个例子，我的网站中还有其他部分可以从中获取，但我想先让这部分工作。我的例子不受他们的影响。

async componentDidMount() {
    // for usernames
    const response = await fetch('http://localhost:3000/users');
    const data = await response.json();
    this.setState({ users: data });
}

我做了https://www.mywebsite.com:3000/users，这给了我控制台上的错误：

跨域请求被阻止：同源策略不允许在https://www.mywebsite.com/users 读取远程资源。（原因：CORS 请求未成功）。

和

TypeError：尝试获取资源时出现 NetworkError。

在火狐上。我尝试了许多变体，例如更改为 http、删除 www、仅放置 /users、删除 :3000 等等，但它们都不起作用。如果我在终端上 curl mywebsite.com:3000/users，我会得到我想要的数据。如果我在浏览器上键入它也可以。用 IP 地址替换域也可以。所以，我确实 fetch(mywebsite.com:3000/users) 和其余代码。这不起作用，因为 fetch 希望我以 http 或 https 开头。

编辑：我忘了说我在 node.js 服务器上使用 express.js

编辑：我也通过 nginx 运行网站。我使用这种方法：https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-js-application-for-production-on-ubuntu-18-04 来运行我的后端。

编辑：我发现后端在 nginx 上运行，链接为 http://mywebsite.com:3000/users。再次通过浏览器或终端输入数据时，我得到了数据。但我的第一个错误改为：

阻止加载混合活动内容“http://mywebsite.com:3000/users” www.fakeconomy.com:1:882

该链接重定向到 mywebsite.com:3000/users 并显示数据。所以我认为这与只输入 mywebsite.com:3000/users 没有什么不同。将其更改为 https 或添加 www。不起作用。

【问题讨论】：

似乎 cors 在服务器上已禁用。如果您使用的是 expressJs，请转到 enable-cors.org/server_expressjs.html 如果有任何其他服务器框架让我知道
@ArshpreetWadehra 我按照链接复制并粘贴了 app.use() 代码并添加了“next”参数，因为我之前只有 (req, res)。我仍然得到同样的错误。我需要更换任何东西吗？
您发出 GET 请求。是否可以通过浏览器直接访问mywebsite.com:3000/users 来获取require 输出？
@ArshpreetWadehra 是的。我在我的问题中也是这么说的。它仍然有效。我尝试将 fetch url 改回你所说的，它只是给出了第二个错误。但我认为在我添加新代码之前是一样的。
尝试使用cors插件github.com/expressjs/cors

标签： javascript node.js reactjs

【解决方案1】：

您必须在后端启用cors。
如果您想使用https，您必须为您的 vps 安装 ssl。最好的解决方案是 Let's Encrypt

【讨论】：

我认为你应该使用axios 来获取数据。试一试，展示你的问题

【解决方案2】：

当然，您应该使用相同的名称 - 请将 localhost 替换为您的网页 DNS 名称。

仅供参考： https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

【讨论】：

【解决方案3】：

我能够解决它！我的 nginx 代理服务器设置错误。我喜欢它

server {
...

    location / {
            try_files $uri $uri/ =404;
    }

    location /users {
            proxy_pass http://localhost:3000;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
    }

...
}

因为我不知道在 location / 之后放置什么，并且 nginx 抱怨相同的位置，所以我输入了服务器名称，它只是服务器（通过 pm2 运行）。当我输入 mywebsite.com:3000/users 时，它没有通过反向代理，因为“服务器”没有被命中。问题是 fetch 的 url 就像我想的那样，但是 nginx 设置是造成混乱的原因。如果我为获取 url 完成了https://www.mywebsite.com/server，那就没问题了。当我将 nginx 代码更改为 location /users 并测试时，我能够解决它：

fetch('https://www.mywebsite.com/users');

【讨论】：