json-server运行报错Access to XMLHttpRequest at ‘http://localhost:3000/a‘ from origin ‘http://127.0.0.

json-server运行报错Access to XMLHttpRequest at ‘http://localhost:3000/a’ from origin 'http://127.0.0.1:5

---

前言

前几天，在写Ajax的简单练习时，发现使用json-server搭建的简单的模拟数据时，一直报错，查了下发现是跨域问题。

因为我使用的是json-server的最新版，最新的 json-server 版本，–cors 选项已被移除，所以，我在解决跨域问题的时候，尝试了一些办法，一直没用，经过不懈努力，终于解决。

一、方法一：降低版本

下载 json-server 的较低版本，可以使用 npm 命令来指定所需的版本号进行安装。以下是具体步骤：

1. 打开终端或命令提示符。

2. 运行以下命令来安装 json-server 的特定版本：

   npm install -g json-server@<version>

将 <version> 替换为您想要安装的具体版本号。

例如，要安装 json-server 的 0.16.3 版本，可以运行以下命令：

   npm install -g json-server@0.16.3

npm 将自动下载并安装指定版本的 json-server。

然后，运行

json-server --watch db.json --port 3000 --cors "http://127.0.0.1:5500"

将上面的的端口号改为自己的端口号即可。

二、方法二：自定义中间件来解决 CORS 问题

1.首先，安装 json-server 和 cors 模块（如果尚未安装）：

npm install -g json-server cors

2.创建一个名为 server.js 的文件，并在其中编写如下内容：

const jsonServer = require('json-server');
const cors = require('cors');

const server = jsonServer.create();
const router = jsonServer.router('db.json');
const middlewares = jsonServer.defaults();

server.use(cors());
server.use(middlewares);
server.use(router);

const port = 3000;
server.listen(port, () => {
  console.log(`JSON Server is running on port ${port}`);
});

上述代码使用了 cors 模块来添加 CORS 支持。

启动服务器：

node server.js

请确保在运行 json-server 的目录中存在一个名为 db.json 的文件，或者根据实际情况修改文件名和路径。

现在，您应该能够从 http://127.0.0.1:5500 发起对 http://localhost:3000/a 的请求而不再遇到 CORS 错误。

总结

降低版本应该注意的是：较旧版本的软件可能存在安全漏洞或缺陷，所以还是建议使用最新版本以获得最佳的安全性和功能。确保在使用较旧版本时进行适当的安全性评估和测试。