javascript - 我正在尝试使用 json-server、Node 和 Express 为我在本地主机上的 Angular 应用模拟一个 RESTFUL API。 CORS问题接踵而至

Question

基本上，我需要运行一个带有 json-server 的 Node/Express 服务器来为我正在开发的测试 Angular 应用程序模拟一个 RESTFUL API。问题是谷歌浏览器抛出一个错误，表明我遇到了 CORS 问题。我已尝试以解决 CORS 问题的方式配置我的服务器。 . .

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

. . .无济于事。

如果不摆弄 JSONP 或以任何方式更改我的 Angular 代码，我还能做些什么吗？它似乎在 Rails 服务器上工作得很好。

编辑:正如许多人所建议的那样，我尝试使用 cors 模块来解决这个问题，但这似乎也没有用。这是我的 server.js 文件:

var express = require('express');
var app = express();
var path = require("path");
var jsonServer = require("json-server");
var databaseServer = jsonServer.create();
var cors = require("cors");

app.use(cors());
app.use("/", express.static(__dirname));
  var server = app.listen(3000, function () {
  var host = server.address().address;
  var port = server.address().port;
  console.log('Example app listening at http://%s:%s', host, port);
});

var object = {
  "fighters": [
    {
      "id": 1,
      "firstName": "Jose",
      "lastName": "Aldo",
      "nickname": "Scarface",
      "wins": 25,
      "losses": 1,
      "draws": 0,
      "imageUrl": "/images/jose_aldo.png"
    },
    {
      "id": 2,
      "firstName": "Conor",
      "lastName": "McGregor",
      "nickname": "",
      "wins": 17,
      "losses": 2,
      "draws": 0,
      "imageUrl": "/images/conor_mcgregor.png"
    }
  ]
};


databaseServer.use(jsonServer.defaults);
databaseServer.use(jsonServer.router(object));
databaseServer.listen(4000);

这是我的 Angular 服务:

var FighterService = angular.module("FighterService", ["ngResource"]);

FighterService.factory("Fighter", ["$resource", function ($resource) {
  return $resource("localhost:4000/fighters/:fighterId",
    { fighterId : "@id" },
    {
      query: {
        method: "GET",
        params: { fighterId: "@id" },
        isArray: true 
      },
      get: { method: "GET" }
    });
}]);

Answer 1

已解决

线索在错误中:

XMLHttpRequest cannot load localhost:4000/fighters.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.b

在你的 Angular 中，行

return $resource("localhost:4000/fighters/:fighterId",

认为您指的是协议(protocol)为“localhost:”的 URL。

它应该是一个绝对的 HTTP URL:

return $resource("http://localhost:4000/fighters/:fighterId",

有了正确的 CORS 支持，您就可以正常工作。