部署网站后客户端POST/GET请求被CORS拦截该如何解决？

解决方案 #

• 调整cors中间件注册顺序
  cors中间件必须注册在所有接口路由、express.json()等其他解析中间件之前，如果你现有代码中路由定义早于cors配置，会导致跨域规则不生效，正确的注册顺序示例如下：

  const server = express();
  // 第一步注册cors
  server.use(cors({origin: "https://frontendwebsitename.com", credentials: true}));
  // 再注册解析中间件
  server.use(express.json());
  server.use(express.urlencoded({extended:true}));
  // 最后注册路由
  server.get('/fetchDefaultSearch', (req, res) => {
    // 你的业务逻辑
  })
  

• 新增预检请求手动处理逻辑
  部分部署环境会优先拦截OPTIONS类型的预检请求，没有走到express的cors中间件就返回了响应，导致缺少跨域头，可以手动新增中间件处理所有OPTIONS请求：

  server.options('*', (req, res) => {
    res.header('Access-Control-Allow-Origin', 'https://frontendwebsitename.com');
    res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    res.header('Access-Control-Allow-Credentials', 'true');
    res.sendStatus(204);
  })
  

• 检查前端axios配置
  后端开启credentials: true的前提下，前端axios必须同步开启withCredentials配置，示例：

  axios.defaults.withCredentials = true
  // 或者单次请求配置
  axios.post('https://backendwebsitename.herokuapp.com/fetchDefaultSearch', data, {
    withCredentials: true
  })
  

• 排查线上环境变量配置
  如果你线上的origin值是读取环境变量而非硬编码，确认Heroku后台配置的前端域名变量正确，没有拼写错误、多余斜杠等问题，origin不匹配的情况下cors不会返回Access-Control-Allow-Origin头。

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