当 API 不允许 Access-Control-Allow-Origin 时该怎么办

Posted 2023-02-27

【中文标题】当 API 不允许 Access-Control-Allow-Origin 时该怎么办

【英文标题】：What to do when an API doesn't allow Access-Control-Allow-Origin

【发布时间】：2016-01-01 23:40:24

【问题描述】：

我对所有这些同源政策的事情感到疯狂。

当我尝试向 Google Maps API 发出请求时，我没有遇到任何问题：

var jsonData = $.ajax(
        url:"http://maps.googleapis.com/maps/api/geocode/json?address=",
        dataType:"json",
        async:true,
        success: function(json)...

我认为这是因为 Google Maps API 允许 Access-Control-Allow-Origin。但是当我尝试使用 openls.geog.uni-heidelberg.de API 时，我得到了跨域错误：

var xmlData = $.ajax(
              type: "GET",
              url:"http://openls.geog.uni-heidelberg.de/route?"
              //dataType:"jsonp xml",
              dataType: "xml",
              async:true,
              crossDomain : true,
              success: function(xml)...

请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'http://localhost' 因此不允许访问。

我认为我不明白的是，如果 openls API 不允许跨域，为什么可以直接从我的浏览器发出请求，只需输入如下网址：

http://openls.geog.uni-heidelberg.de/route?start=9.256506,49.240011&end=8.72083,49.7606&via=&lang=de&distunit=KM&routepref=Bicycle&weighting=Shortest&avoidAreas=&useTMC=false&noMotorways=false&noTollways=false&noUnpavedroads=false&noSteps=false&noFerries=false&instructions=false

但我不能使用 jquery 来做到这一点。我也尝试过 jsonp 解决方案，但它不适用于 xml。

知道发生了什么？

【问题讨论】：

尝试将 dataType 更改为 jsonp - 我认为在当前示例中您可以使用 JSONP 而不是 CORS。

@unixarmy 鉴于它正在返回 XML，我认为 JSONP 行不通。

啊，抱歉，我没注意到。你说得对！ :)

@kramer 您将需要使用服务器端代理来实现这一点，即。 JS AJAX 请求本地服务器 -> 远程服务器，请求接收，响应发送，远程服务器 -> 本地服务器 -> AJAX 请求到 JS。

服务器代理是最好的选择。此外，当您直接访问 url 时它也有效，因为这样做时您没有来源。您应该联系网站管理员报告问题，提供公共 API 而不启用 CORS 很奇怪。

【参考方案1】：

由于本地运行的两个项目（Angular App 和 Node.JS Web 服务）的交互导致的 CORS 问题，我苦苦挣扎了太久

看看简单的解决方法：Chrome 的插件 AllowControlAllowOrigin。

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

只需将单选按钮从红色切换到绿色，就不会再被阻止请求、错误或警告！ 我希望它可以与您的 API 一起使用，当然这不是一个永久的解决方案，但这是避免在那些烦人的反复出现的问题上浪费时间的好方法。