没有 cors 配置不适用于 json-server

Question

我正在使用 json-server 创建我的实际 API 的模拟 API 用于离线测试目的。我可以在他们的 Url 端点下看到模拟 API 响应： localhost:5001/api/searchresults/*

但是在我的应用程序上我看不到结果，因为请求被 CORS 阻止了。阅读 json-server 文档，有一种方法可以禁用 CORS 问题，添加 jsonServer.defaults({ noCors: true }) 作为中间件。

我然后添加一个自定义服务器和运行这与节点 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));

没有 cors 配置不适用于 json-server

no cors config not working with json-server

cors

json-server