如何使用JavaScript（jQuery）的Ajax从外部URL获取JSON数据？

问题根因 #

• 第一个dataType: "json"请求失败是同源策略CORS限制导致：
  你当前站点域名和https://www.teamspeak.com不属于同一个源，且该接口返回的响应头没有配置允许你域名跨域访问的Access-Control-Allow-Origin字段，浏览器会直接拦截本次Ajax请求，所以返回readyState:0, status:0的错误。
  你直接在浏览器地址栏访问该地址能拿到数据，是因为浏览器直接发起普通GET请求不受同源策略限制，只有页面内的Ajax/XHR请求才会触发跨域校验。
• 换成dataType: "jsonp"后返回200但依然走error回调，是因为JSONP要求服务端返回包裹了回调函数的JS代码，而该接口仅返回纯JSON格式数据，jQuery无法按照JSONP格式解析响应内容，所以判定为请求失败。

可行解决方案 #

方案1：后端代理转发（生产环境首选） #

在你自己的后端服务上新增一个代理接口，前端请求同域名下的这个代理接口，由后端服务去请求https://www.teamspeak.com/versions/server.json拿到数据后再返回给前端，后端请求不受同源策略限制，完全规避跨域问题。

方案2：本地调试临时关闭浏览器跨域限制 #

仅适合本地开发调试使用，不能用于生产环境：
Windows下给Chrome快捷方式的目标字段后加参数启动：
"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:\ChromeDevTemp"
Mac下终端执行：
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/你的用户名/ChromeDevTemp

方案3：联系接口提供方配置跨域 #

如果能联系到teamspeak接口的运维人员，可以申请将你的站点域名添加到该接口的CORS白名单，或者让接口支持JSONP格式响应，即可直接前端请求。

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