Tuya API授权失败：Vue3项目调用遇CORS错误求解决方案

不需要额外添加请求头，CORS错误和请求头配置无关，本质是浏览器的同源策略限制导致的——Postman作为独立客户端工具不受这个限制，所以能正常请求，但Vue项目在浏览器中运行时，浏览器会拦截跨域请求，除非目标服务器（Tuya API）返回允许跨域的响应头。

下面是可行的解决方法：

1. 本地开发用Vue CLI代理 #

如果你的项目是用Vue CLI创建的，直接在vue.config.js中配置开发服务器代理，让本地服务器转发请求到Tuya API：

module.exports = {
  devServer: {
    proxy: {
      '/tuya-proxy': {
        target: 'https://openapi.tuyaus.com', // 替换为你实际使用的Tuya API域名
        changeOrigin: true,
        pathRewrite: {
          '^/tuya-proxy': '' // 去掉请求路径中的代理前缀
        }
      }
    }
  }
}

之后把代码中的baseUrl改成'/tuya-proxy'，这样浏览器请求的是本地服务器，再由本地服务器转发到Tuya API，绕开同源限制。

2. 生产环境用反向代理 #

上线部署时，用Nginx等服务器做反向代理，配置示例：

location /tuya-proxy {
  proxy_pass https://openapi.tuyaus.com;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
}

同样调整前端请求路径为'/tuya-proxy'开头，通过Nginx转发请求。

3. 配置Tuya API跨域白名单 #

部分云API支持添加前端域名到跨域白名单，你可以登录Tuya开发者后台，检查是否有“跨域配置”相关选项，把你的前端项目域名添加进去。配置生效后，Tuya API会自动返回Access-Control-Allow-Origin响应头，允许浏览器跨域请求。

你的签名已经和Postman一致，说明请求本身的逻辑没问题，不用在请求头上浪费时间，重点解决跨域的同源策略限制即可。

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