没有 cors 配置无法与 json-server 一起使用

Question

我正在使用 json-server 创建我的实际 API 的模拟 API，以用于离线测试目的。 我可以在其 Url 端点下看到模拟 API 响应：

localhost:5001/api/searchresults/*

但在我的应用程序上我看不到结果，因为请求被 CORS 阻止。 阅读 json-server 文档，有一种方法可以禁用 CORS 问题，添加

jsonServer.defaults({ noCors: true })

作为中间件。

我添加一个自定义服务器并使用 Node server.js 运行它

// server.js
const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router('db.json')
const middlewares = jsonServer.defaults({ noCors: true })

server.use(middlewares)

server.use('/api/searchresults', router)
server.listen(5001, () => {
  console.log('Mock api server listening at localhost:5001')
})

但不幸的是，当我尝试获取我的数据时，仍然遇到 Cors 问题。

有人知道为什么不起作用或如何解决这个问题吗？

这是完整的项目：https://github.com/ElliotForWater/efw-webapp

Answer 1

因为 json-server 包似乎不再维护了 https://github.com/typicode/json-server/issues/1219 我想出了一个方法，只用 Express 就可以解决这个问题

server.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'http://localhost:3000')
  res.header('Access-Control-Allow-Headers', '*')
  next()
})

添加这些行对我们有用 希望对遇到类似情况的人有帮助

Answer 2

启用 CORS 的最简单方法是使用 cors 库。

使用

npm install cors

将其安装到您的项目中，然后需要它并将其添加为中间件：

const jsonServer = require('json-server')
    
// Import the library:
const cors = require('cors');

const server = jsonServer.create()       
        
// Then use it before your routes are set up:
server.use(cors());

默认情况下，cors 库将允许来自任何来源的请求。这可能会让您面临安全问题和滥用行为。

对于生产用途，最好不要允许所有来源。相反，创建一个

domainList

允许的域，并根据

domainList

检查每个请求。方法如下：

// Set up a domainList and check against it:
const domainList = ['http://example1.com', 'http://example2.com']

const corsOptions = {
  origin: function (origin, callback) {
    if (domainList.indexOf(origin) !== -1) {
      callback(null, true)
    } else {
      callback(new Error('Not allowed by CORS'))
    }
  },
}

// Then pass them to cors:
server.use(cors(corsOptions));