Question

我有一个反应网站托管在DigitalOcean小滴上。我也有一个node.js服务器在相同的小滴上运行。从后端获取时应替换为哪个URL？

从计算机本地运行前端和后端时，网站可以正确提取数据。在本地工作时，我在获取数据时使用了URL http://localhost:3000/users。我尝试了许多不同的URL，但在服务器上尝试它们时所有这些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。

在Firefox上。我尝试了多种变体，例如更改为http，删除www，仅放置/ users，删除：3000等，但它们都没有起作用。如果我在终端上卷曲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运行我的后端。

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

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

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

Answer 1

您必须在后端启用cors。
如果要使用https，则必须为vps安装ssl。最好的解决方案是让我们加密

Answer 2

请确保您使用相同的名称-请用您的网页DNS名称替换localhost。

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

Answer 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;
    }

...
}

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

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

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

3 个答案: