Docker部署CouchDB遇CORS跨域及请求pending问题求助

问题背景 #

• 使用Axios/Fetch请求Docker部署的CouchDB时，用localhost发起请求会一直处于pending状态，Postman测试也存在相同问题
• 改用127.0.0.1后，Postman可正常请求，但React前端通过Axios请求时触发CORS错误

环境配置 #

通过docker-compose.yml部署CouchDB，前端为React项目，HTTP库使用Axios：

version: '3'
services:
  couchserver:
    image: couchdb
    ports:
      - '5984:5984'
    environment:
      - COUCHDB_USER=admin
      - COUCHDB_PASSWORD=password
      # address binding 
      - COUCHDB_BIND_ADDRESS= 0.0.0.0
    volumes:
      - ./dbdata:/opt/couchdb/data

错误信息 #

Access to XMLHttpRequest at 'http://admin:password@127.0.0.1:5984/taskboard1' from origin 'http://localhost:5983' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

前端请求代码 #

// put request to create a new task
export const createTaskBoard = createAsyncThunk(
  'tasks/createTask',
  async (taskBoardBody: taskBoard) => {
    // using axios for put request
    const options = {
      headers: {
        'Content-type': 'application/json',
        'Access-Control-Allow-Origin': '*',
      },
    };
    console.log('here test');
    const { data, status } = await axios.put<taskBoard>(
      'http://admin:password@127.0.0.1:5984/taskboard1',
      taskBoardBody,
      options,
    );
    return data;
  },
);

解决方案 #

1. 开启并配置CouchDB的CORS #

CouchDB默认关闭CORS，需通过API或管理界面开启：

• 通过curl配置：

  # 启用CORS
  curl -X PUT http://admin:password@127.0.0.1:5984/_node/_local/_config/httpd/enable_cors -d '"true"'
  # 允许前端所在的源（按需修改，多个用逗号分隔）
  curl -X PUT http://admin:password@127.0.0.1:5984/_node/_local/_config/cors/origins -d '"http://localhost:5983,http://127.0.0.1:5983"'
  # 允许携带凭证（如Cookie、HTTP认证信息）
  curl -X PUT http://admin:password@127.0.0.1:5984/_node/_local/_config/cors/credentials -d '"true"'
  # 允许的HTTP方法
  curl -X PUT http://admin:password@127.0.0.1:5984/_node/_local/_config/cors/methods -d '"GET,PUT,POST,DELETE,OPTIONS"'
  # 允许的请求头
  curl -X PUT http://admin:password@127.0.0.1:5984/_node/_local/_config/cors/headers -d '"accept,authorization,content-type,origin"'
  

• 通过管理界面配置：
  访问http://127.0.0.1:5984/_utils/，登录后进入Settings -> CORS，勾选Enable CORS，并填写允许的源、方法、头信息。

2. 修正前端请求配置 #

前端代码中添加的Access-Control-Allow-Origin是服务器响应头，前端请求时不需要设置，需移除该配置：

// 修改后的options配置
const options = {
  headers: {
    'Content-type': 'application/json',
    // 移除不必要的Access-Control-Allow-Origin头
  },
};

3. 验证并重启服务 #

执行以下命令重启CouchDB容器，确保配置生效：

docker-compose restart couchserver

之后重新发起前端请求，即可正常访问CouchDB。

内容的提问来源于stack exchange，提问作者Ahmed fouad