如何从URL获取JSON字符串？跨域请求被浏览器拦截该如何处理

核心认知误区梳理 #

• 你对示例代码的判断完全错误：书中用到的$.get是jQuery对XHR的标准封装，本质和其他几个AJAX方法一样，都会发起标准的XHR跨域请求，没有任何绕过浏览器安全机制的特殊逻辑。它能正常运行的前提，要么是编写示例时FAA的接口刚好配置了跨域允许头，要么是对应的Chrome扩展权限配置完全正确，不存在“不发XHR就能取跨域数据”的魔法。
• 你混淆了“同站”的判定规则：只要你运行前端代码的页面域名和faa.gov不一致，对这个域名发起的请求就属于跨站请求，必然触发浏览器的CORS检查，和你用什么请求方法、什么封装库没有关系。
• 你对Chrome扩展的权限生效范围理解错误：扩展配置的主机访问权限，只对扩展自身的后台脚本（Service Worker/Background Page）生效，对注入到网页里的内容脚本完全不生效。如果你的跨域请求代码写在内容脚本里，哪怕manifest配置了允许访问目标站点，该被CORS拦截还是会被拦——这就是你做了扩展配置依然报错的核心原因。
• 你选错了请求目标：https://www.fly.faa.gov/flyfaa/usmap.jsp是返回静态HTML的页面地址，不是返回结构化JSON的接口。哪怕你绕开CORS限制，强行让jQuery按JSON格式解析这个HTML返回值，也会触发解析错误，和你要获取的机场状态JSON接口完全不是同一路径。

对应修复方案 #

• 如果是普通网页环境（非扩展）开发：
  你没有任何办法在前端代码层面绕过CORS限制。这是浏览器内置的安全机制，只要目标服务器返回的响应里没有携带Access-Control-Allow-Origin头，浏览器就会主动拦截响应，不让JS代码读取。所有前端层面的配置调整（改请求头、换jQuery方法、加callback参数）都无法解决这个问题，唯一的方式是搭建自有后端代理，由后端服务器发起跨域请求拿到数据后，再返回给前端页面。
• 如果是Chrome扩展开发环境：
  1. 把跨域请求的代码从内容脚本中完全移到扩展的后台Service Worker中，不要在注入网页的脚本里发起跨域请求
  2. 按Manifest V3的规范配置权限，不要用旧版的permissions字段声明主机访问权限，要单独使用host_permissions字段，明确添加目标域名的访问规则，示例配置：

     "host_permissions": [
       "https://www.fly.faa.gov/*",
       "http://services.faa.gov/*"
     ]
     

  3. 根据实际请求的资源类型调整jQuery的请求参数：
     • 如果请求的是usmap.jsp这类HTML页面，就把dataType设置为html，不要强行指定json，否则会触发解析错误
     • 如果请求的是机场状态JSON接口，就不要误用usmap.jsp的地址，同时注意URL拼接的格式错误：原示例里拼接地址时漏了斜杠，正确的路径格式应该是http://services.faa.gov/airport/status/ + 机场代码，否则会返回资源不存在的错误。

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