我正在尝试使用json服务器，Node和Express为本地主机上的Angular应用模拟RESTFUL API。随后发生了CORS问题

Question

基本上，我需要运行带有json-server的Node / Express服务器，以模拟用于正在开发的测试Angular应用的RESTFUL API。问题是Google Chrome浏览器抛出错误，表明我遇到了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无法加载localhost：4000 / fighters.json。跨源请求仅支持以下协议方案：http，数据，chrome，chrome扩展名，https，chrome-extension-resource.b

在你的角度，线

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

认为您指的是协议为“ localhost：”的URL。

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

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

有了您已经拥有的正确CORS支持，这种方法就可以工作。

Answer 2

如果只有您需要进行测试，最简单的方法可能是打开 Chrome，--disable-web-security这样浏览器就不需要 CORS 标头来将数据视为安全的。（h/t@Taran）

如果其他人也需要测试，最简单的方法可能是使用cors 模块。

如果你想推出自己的 Express 中间件来处理它，我前段时间也做了同样的事情。这就是我的想法。将上面的 Express 中间件替换为：

app.use(function (req, res, next) {
    'use strict';

    res.header('Access-Control-Allow-Origin', '*');

    if (req.headers['access-control-request-method']) {
        res.header('Access-Control-Allow-Methods', 'GET, OPTIONS');
    }
    if (req.headers['access-control-request-headers']) {
        res.header('Access-Control-Allow-Headers', 'X-Requested-With');
    }

    res.header('Access-Control-Max-Age', 60 * 60 * 24 * 365);

    if (req.method === 'OPTIONS') {
        res.sendStatus(200);
    } else  {
        next();
    }
});

如果您需要更多上下文，代码位于此处。