Angular httpclient CORS 请求返回 404 错误答案

【问题标题】：Angular httpclient CORS request returns 404 errorAngular httpclient CORS 请求返回 404 错误
【发布时间】：2019-12-12 16:01:38
【问题描述】：

我启动了一个在 127.0.0.1:4200 (PC A) 上运行的示例 Angular 应用程序，我在同一台计算机上启动了一个 Web 浏览器，一切正常。

在应用程序中，有一个 heroService.ts 调用 this.http.get 等从 127.0.0.1:4200 获取数据。

然后我使用 nodejs express 启动了另一个 http 服务器，它提供了一些 API 服务，IP 是 192.168.2.101:3000 (PC B)。该 api 非常好，因为我可以在任何网络浏览器中运行它并查看结果（全部在 json 中）。在 nodejs express 中，我也安装了 cors 并使用 app.use(cors()) 来启用 CORS 支持。

以下是问题所在。

我在PC A跟随heroService.ts，创建了apiService.ts，并在PC B使用this.http.get("http://192.168.2.101:3000").subscribe(_=>console.log("ok"));调用API（PC B应该已经开启cors了）。

但是，在浏览器上运行的 Angular 似乎无法识别此地址，并且在浏览器的调试窗口中，我可以看到 404 错误，http://192.168.2.101:3000 找不到。请注意，相同的 url http://192.168.2.101:3000 可以直接在 Web 浏览器中完美运行。

奇怪的是，在浏览器的（chrome 和 edge）网络调试窗口中，我看不到任何请求正在发送，也没有这样的请求发送到服务器。在 nodejs 的服务器端，我尝试记录任何连接，但我也看不到任何连接。在我看来，网络浏览器没有发送这个 http get out，并且 angular 库直接返回 404。

我尝试搜索相同的错误，但找不到任何有用的东西。

我猜 Angular 的库将继续使用基本 url (127.0.0.1:4200) 并且不会解析 http://192.168.2.101:3000 ？有办法解决吗？

我希望我清楚地解释了这个问题。

感谢您的帮助。

【问题讨论】：

它确实找到了服务器，否则您将不会从该服务器获得 404 响应。 404 表示浏览器找到了服务器，但服务器无法获取浏览器请求的资源。所以检查服务器上发生了什么。
@JBNizet 嗨，谢谢。但是，我使用浏览器测试链接，它运行良好，我也可以在浏览器网络响应中看到“Access-Control-Allow-Origin：*”。奇怪的是，如果我使用 Angular 的 this.http.get 来获取这个链接，在浏览器的（chrome 和 edge）网络调试窗口中，我看不到任何请求正在发送，没有这样的请求发送到服务器。在 nodejs 的服务器端，我尝试记录任何连接，但我也看不到任何连接。在我看来，是网络浏览器没有发送这个 http 出去，但是 Angular 库直接返回 404。
@user534498 您可能需要为此使用代理配置，这可能对您有所帮助angular.io/guide/build。
如果 OPTIONS 请求失败，您可能看不到网络请求的 cors 错误，如果是这样，则不会发送后续的 GET 请求，这在客户端访问另一台主机上的服务时是正常的（提出 CORS 请求）。为了确定服务器/客户端是否是问题，我建议使用 Postman 调用 192.168.2.101:3000 并查看是否遇到相同的错误。即使您的 cors 设置正确，它也可能是您的路线配置

标签： node.js angular typescript cors

【解决方案1】：

我认为您遇到了与此类似的错误。

从源“http://localhost:3000”对“http://localhost:1337/api/Jobs/addjob”处的 XMLHttpRequest 的访问已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：“Access-Control-Allow-Origin” '标头包含无效值''。

因此您应该启用跨域资源共享（也称为 CORS）。为此，我们需要在响应中设置正确的标头，以允许浏览器使用来自任何域的数据。

要使用 Angular 等框架将数据加载到客户端代码（前端），您可以在定义路由之前从服务器端（后端）使用 express(Node.js) 中的中间件函数。

app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); });

以下链接将有助于获得有关“启用 CORS express.js (node.js)”的更多知识。 https://jonathanmh.com/how-to-enable-cors-in-express-js-node-js/

【讨论】：