没有“访问控制允许来源”Couchdb 和 docker

Question

• 当使用 [ Axios 或 Fetch ] 在 [couchdb] 上进行操作时
• 使用 localhost：请求待处理
• 当用 postman 测试时同样的问题

第一个解决方案是使用 127.0.0.1 而不是 localhost

• 它适用于 postman 但前端请求给了我 CORS 错误

我的环境

• 在 docker-composer.yml 中使用 coushDB
• 前端是 reactjs
• 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;
  },
);

Answer 1

正如我所说，它适用于 Postman，所以我开始考虑如何制作像 postman 这样的 chrome，所以我在这种模式下运行 chrome，它运行良好

google-chrome --disable-site-isolation-trials --disable-web-security --user-data-dir="~/tmp"

另一种解决方案是使用 chrome 扩展来解决 CORS 问题