HTML内嵌JavaScript调用Ecobee API发请求返回readyState 0错误如何解决

核心错误原因 #

你遇到的{"readyState":0,"status":0,"statusText":"error"}返回是浏览器同源策略拦截跨域请求的典型表现，请求还未发送到Ecobee服务端就被浏览器拦截，所以没有有效错误详情。

代码中的错误点 #

• 你在$.ajax的请求头中添加的Access-Control-Allow-Origin: '*'属于错误用法：该字段是服务端返回响应时携带的响应头，不是前端发起请求时可以设置的请求头，额外添加反而可能导致跨域预检请求失败。
• Ecobee的/authorize授权接口本身不支持前端直接发起跨域请求，这类OAuth类授权接口要求必须从服务端发起请求，避免密钥泄露同时符合接口安全规则。

修复方案 #

临时本地测试方案 #

你可以给浏览器关闭跨域安全限制验证逻辑正确性，仅适合本地测试使用，不可用于生产环境：
Windows下Chrome关闭跨域启动参数：

chrome.exe --disable-web-security --user-data-dir=C:\ChromeDevData

Mac下Chrome关闭跨域启动参数：

open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/tmp/ChromeDevData

生产可用方案 #

你需要自行搭建后端代理接口中转请求，规避浏览器跨域限制：

1. 前端删除$.ajax中的headers配置，改为请求你自己的同域后端接口
2. 后端收到前端请求后，服务端向Ecobee的/authorize接口发起请求，服务端请求不存在同源策略限制
3. 后端拿到Ecobee返回结果后，再将结果返回给前端即可

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