禁用CORS后仍报No 'Access-Control-Allow-Origin'错误如何解决

报错原因 #

该对预检请求的响应未通过访问控制检查：请求的资源上不存在'Access-Control-Allow-Origin'标头报错，核心原因是fatsecret平台的API服务没有配置允许当前前端域名跨域访问。CORS是浏览器的安全策略，由服务端全权控制，此前尝试的单方面修改前端请求头、本地禁用CORS的操作都无法解决生产环境的问题，仅能用于本地临时调试。

可用解决方案 #

• 方案1：后端代理中转（生产环境推荐，唯一可上线方案）
  前端不要直接请求fatsecret的接口，改为请求自有业务后端接口，由后端服务向fatsecret发起请求，拿到结果后再返回给前端。服务端之间的HTTP请求不存在CORS限制，可完美规避该问题，同时还能避免把oauth_consumer_key、签名规则这类敏感信息直接暴露在前端代码中，降低密钥泄露风险。
• 方案2：前端开发服务代理（仅本地调试用）
  如果使用Vue、React等带本地开发服务的框架，可配置开发代理实现本地跨域调试，以Vite为例配置如下：

  // vite.config.ts
  export default defineConfig({
    server: {
      proxy: {
        '/fatsecret': {
          target: 'https://platform.fatsecret.com',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/fatsecret/, '')
        }
      }
    }
  })
  

  配置完成后修改请求代码即可：

  // 注意此处优先换为GET请求，该类查询接口通常不需要POST
  axios.get("/fatsecret/rest/server.api?food_id=33691&method=food.get.v2&oauth_consumer_key=9a1a6fd1fff5433f9dd77daa4587bf5d&oauth_nonce=1234&oauth_signature=sAyYTJiIxOGkvFpBcH8L%2BlFQRCQ%3D&oauth_signature_method=HMAC-SHA1&oauth_timestamp=1245126631&oauth_version=1.0")
  .then(response=>{
      console.log(response.data);
  })
  .catch(error=>{
      alert("wrong");
      console.log(error)
  })
  

• 额外优化建议
  当前代码使用POST请求，但所有参数都放在查询字符串中、请求体为空，可先确认接口文档要求，food.get.v2这类查询接口通常支持GET请求，改为GET请求属于简单请求，不会触发OPTIONS预检，可降低跨域问题的出现概率。

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