Javascript Nodejs本地API不工作

我正在和NodeJs一起做一个大学项目，但在本地测试时遇到了一些麻烦

这就是问题所在： 我有一个GET API“/API/services/names”，NodeJS服务器运行在端口8080上

如果我使用Postmanor测试API，将URL放在Chrome栏（“”）中，它工作正常，我可以得到响应

问题是，如果我在本地网站上使用此函数中的

fetch（）

对其进行测试：

function fetchServicesNames(){
    fetch('/api/services/names')
        .then(function(response){
            return response.json();
        })
        .then(function(data){
            data.map(addServiceLink);
        });
}

Javascript控制台显示以下错误：

Failed to load resource: the server responded with a status of 404 (Not Found)

我注意到，当我悬停控制台错误时，它会显示不带端口的请求字符串“”。但我不认为这是问题所在，因为当我在Heroku平台上部署应用程序时，它运行良好。。。问题就出在localhost（我正在使用MacOSX 10.10.2的2010年年中macbook pro）

感谢您的帮助，提前谢谢您

编辑： 根据要求，我在这里添加服务器代码

// server.js for Hypermedia Application project.

// BASE SETUP
//============================================================

// call packages
var express    = require('express');
var app        = express();
var bodyParser = require('body-parser');

app.use(express.static(__dirname + "/public"));

// we use body-parser, so we need to be able to read data either from 
// GET and POST:
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());


// setting the application port to listen 
var serverPort = process.env.PORT || 5000;

// --- database connection omitted ---

// API ROUTES
// ================================================================
// first of all: get the Router
var router = express.Router();

/**
 * Services names
 * /api/services/names  - get   - get all services ids and names
 */
router.route('/services/names')
.get(function (req, res) {

    Service.find({}, 'id name', function (err, services) {

        if (err)
            res.send(err);

        res.json(services);
    });  

});

// --- Other APIs omitted ---

// REGISTER ROUTES:
// all of our routes will be prefixed with /api
app.use('/api', router);


// START THE SERVER
//===================================================================
app.set("port", serverPort);

app.listen(serverPort, function() {
    console.log(`Your app is ready at port ${serverPort}`);
});

---

亲爱的我建议你写总路径如下

http://localhost:<your port number>/api/services/names

http://localhost:/api/services/names

内部fetch（）和u检查一次

---

我也试过了，并且获得了成功

嗨，我试着在您添加的服务器页面上修改行，比如

fetch（'http://'+window.location.host+'：8080/api/services/…）

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();
});

在API发布之前

---

这可能有助于CORS向我们显示服务器代码。这是一个正常的浏览器工作流程，如果您正在获取

/api

浏览器将获取打开的url+

/api/

，只需获取完整地址，如

获取（'localhost:8080/api…'）

，在生产过程中，如果一切都写得很好，您将有一些类型的常量和API url，并将使用此常量获取它。它给我

script.js:47 fetch API无法加载localhost:5000/API/services/names。对于CORS请求，URL方案必须为“http”或“https”。

端口因我的团队选择而更改批准我的回答请将解决方案发布为答案，而不是问题的更新。这是为了帮助未来的游客，避免混淆。谢谢。我试过了，它给了我这个错误：

fetchapi无法加载http://localhost:5000/api/services/names. 请求的资源上不存在“Access Control Allow Origin”标头。起源'http://localhost因此，不允许访问。如果不透明响应满足您的需要，请将请求的模式设置为“no cors”，以获取禁用cors的资源。

我不知道它能做什么be@DavideCremona这个错误消息非常具有描述性。您正在发出一个跨源请求，而服务器不允许跨源请求，因为它忽略了Access Control Allow origin标头。@KevinB是的，我知道，但如果我在web浏览器

localhost:5000/api/services/names

中写入而不包含

http://

部分，则它可以工作。我不明白为什么如果我删除端口（在已部署的应用程序中它可以工作）它就不起作用，因为如果你删除了端口，你就击中了另一个来源。在您的服务器页面上，您保留

app.use（函数（req，res，next）{res.header（“Access Control Allow origin”，“*”）；res.header（“Access Control Allow Headers”，“origin，X-Requested-With，Content Type，Accept”）；next（）；}它可能会帮助您获取CORS
窗口。位置。主机将仅回显当前服务器主机。像
localhost
。那么让我们也连接端口。像
fetch（'http://'+window.location.host+'：8080/api/services/…）
。它会成功的