当使用来自不同本地主机端口的 GET api - CORS 问题时，本地主机上的 Angular 得到 404？答案

【问题标题】：Angular on localhost gets 404 when consuming GET api from different localhost PORT - CORS issue?当使用来自不同本地主机端口的 GET api - CORS 问题时，本地主机上的 Angular 得到 404？
【发布时间】：2017-08-22 01:05:42
【问题描述】：

自从我从 in-memory-web-api URL 切换到数据库 URL 后，Angular 应用程序的 JavaScript 控制台给了我一个 404 错误

JavaScript console output 404 error

我的 Angular 应用程序使用 localhost:3035/
我在 localhost:3039/ 上运行了一个 mongodb/nodejs/express 数据库
使用 in-memory-web-api url 'api/loggerData'，我的 Angular 应用程序“GET”很好

有什么想法吗？是CORS吗？还有什么？我是否也需要在 angular 端配置 lite-server？

这是我的 Angular 代码：

private loggerUrl = 'localhost:3039/read/getall/';
getLoggerData(): Promise <Dataset[]> {
    return this.http.get(this.loggerUrl)
        .toPromise()
        .then(response => response.json().data as Dataset[])   
        .catch(this.handleError);
}

另外，我已经尝试在数据库端实施一些 CORS 解决方案，但没有任何影响 -

这是我修改的一些数据库代码：

var app = express();

app.use(function (req, res, next) {

//Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3035');

// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 
'GET, POST, OPTIONS, PUT, PATCH, DELETE');

// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader('Access-Control-Allow-Credentials', true);

// Pass to next layer of middleware
next();
});

【问题讨论】：

应该是private loggerUrl = 'http://localhost:3039/read/getall/';
如果@echonax 解决方案不起作用，那么我敢打赌它是 CORS 问题。您将不得不配置您的数据库服务器以接受 CORS 请求。
@echonax - 感谢您的建议 - 我已经尝试过了，您所看到的是我尝试输入网址的多种方式之一，但很高兴知道包括'http：/ /' 是正确的方法。事实证明，AJT_82 的回答解决了这个问题——在我研究这个问题时，我还没有看到任何人谈论过 in-memory-web-api 的问题。再次感谢大家
@victor - 我尝试了多种 CORS 解决方案，但都没有成功 - 其中一个留在了上面的快速代码中。结果发现下面发布的答案解决了这个问题 - in-memory-web-api

标签： node.js angular express cors

【解决方案1】：

No collection 错误通常意味着，你挂了一些相当于：

InMemoryWebApiModule.forRoot(InMemoryDataService)

在您的 ngModule 中，当您尝试发出“真正的”http 请求时，它会干扰。所以从你的 ngModule 中删除它，你应该很高兴！ :)

在此之后，您可能仍会遇到 CORS 问题，但这应该可以解决您遇到的当前错误 :)

正如 echonax 所说，您应该使用完整的 url，包括 http：

private loggerUrl = 'http://localhost:3039/read/getall/'

【讨论】：

从 app.module 文件中删除 in-memory-web-api Import 解决了 404 错误 - 我已经查看了堆栈，但还没有将其视为解决方案 - 感谢您的支持帮助！