本地Axios POST请求Docker容器遇CORS跨域错误，如何解决？

首先明确：你在请求头里添加Access-Control-Allow-Origin是无效的——这个是服务器需要返回的响应头，而非前端请求头，浏览器只会依据服务器返回的该字段判断是否允许跨域请求。

以下是几种可行的解决方法：

1. 配置Headless CMS开启CORS支持 #

直接在Docker容器运行的CMS中配置允许跨域的源：

• 多数Headless CMS支持通过环境变量配置CORS，启动容器时添加对应参数：

  docker run -d -p 8055:8055 \
    -e CORS_ENABLED=true \
    -e CORS_ORIGINS=http://localhost:8080 \
    your-cms-image-name
  

• 如果CMS有自定义配置文件，也可挂载配置文件，在其中指定Access-Control-Allow-Origin为http://localhost:8080（开发环境临时可用*，生产环境不建议）。

2. 利用前端开发服务器代理（开发环境首选） #

如果你的前端项目基于Vite、Webpack、Vue CLI等工具搭建，可配置代理转发请求，让浏览器认为是同域请求：

• 以Vite为例，修改vite.config.js：

  export default {
    server: {
      proxy: {
        '/auth': {
          target: 'http://localhost:8055',
          changeOrigin: true
        }
      }
    }
  }
  

• 随后将前端请求的URL改为/auth/login，无需再写完整的http://localhost:8055，开发服务器会自动转发请求到CMS。

3. 本地反向代理（Nginx） #

通过Nginx做中间层转发请求，同时添加CORS响应头：

• Nginx配置示例：

  server {
    listen 8081;
  
    location / {
      proxy_pass http://localhost:8055;
      # 允许指定源跨域
      add_header Access-Control-Allow-Origin http://localhost:8080;
      # 允许的请求方法
      add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
      # 允许的请求头
      add_header Access-Control-Allow-Headers email,password;
    }
  }
  

• 重启Nginx后，前端请求URL改为http://localhost:8081/auth/login即可。

额外建议：你的登录请求将email和password放在请求头里不符合HTTP规范，建议改为放到请求体中：

const options = {
  method: 'POST',
  url: '/auth/login', // 用代理时修改此处
  data: {
    email: 'admin@domain.com',
    password: 'password'
  }
}

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