如何在 Dynamics CRM 中使用 CORS 调用 Google API

Question

我从 Dynamics CRM 365 中的 javascript 网络资源调用了 google API。

            var xhr = new XMLHttpRequest();
        xhr.open("GET", 'https://maps.googleapis.com/maps/api/place/queryautocomplete/json?input={' + searchString + '}&types=address&language=en&crossDomain=true&key=[ourKey]', true);
        xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
        xhr.setRequestHeader('Access-Control-Allow-Methods', 'GET,POST');
        xhr.onload = function () {
            var response = JSON.parse(xhr.responseText);

//do something with the response here

        };
        xhr.send();

我在 IE 的开发工具中收到以下消息和错误：

*SEC7118：https://maps.googleapis.com/maps/api/place/queryautocomplete/json?input={55 lllll}&types=address&language=en&crossDomain=true&key=[ourKey] 的 XMLHttpRequest 需要跨域资源共享 (CORS)。 文件：ClientApiWrapper.aspx

SEC7119：https://maps.googleapis.com/maps/api/place/queryautocomplete/json?input={55 lllll}&types=address&language=en&crossDomain=true&key=[ourKey] 的 XMLHttpRequest 需要 CORS 预检。 文件：ClientApiWrapper.aspx

SEC7120：在 Access-Control-Allow-Origin 标头中找不到来源 http://[ourURL]。 文件：ClientApiWrapper.aspx

SCRIPT7002：XMLHttpRequest：网络错误 0x80070005，访问被拒绝。 文件：ClientApiWrapper.aspx*

浏览了 CORS 相关材料和指南，我相信我做的一切都是正确的。

我也试过这个，虽然我预计这里会出现 CORS 问题：
jQuery.post('https://maps.googleapis.com/maps/api/place/queryautocomplete/json?input={' + searchString + '}&types=address&language=' + langCode + '&key=[ourKey]', 函数（地址）{
试试 {

//Do something with returned addresses here...

            }
            catch (e) {
                alert("AutoComplete ErrorInt: " + e.message);
            }
        });

我确定这是与 Dynamics CRM 相关的问题，其中动态在它自己的沙盒之外不能很好地发挥作用。

任何人都可以在 Dynamics CRM 领域内提出修复建议吗？

谢谢

Answer 1

所以，在搞砸之后，我在 Google API 开发支持上发布了一个问题。这是返回的内容...希望它可以帮助其他人尝试类似的事情：

感谢您的发帖。 我可以看到您在 HTTP 请求中使用了 Places API Web 服务。 Places API Web 服务不适用于客户端应用程序，因为响应不包含 Access-Control-Allow-Origin 标头。在重复问题中查看更多信息。 要在 JS 应用程序中使用 Places API，我建议您使用 Maps Javascript API 1 中的 Places Library。这个库提供了一个 autocomplete2 功能，您可以在 Places API Web 服务中找到它。如果您想要 web 服务的 queryautocomplete 功能，Javascript API 提供了 getQueryPredictions() 函数，如文档3 中所述。

Answer 2

Access-Control-Allow-Origin 和 Access-Control-Allow-Methods 标头是 response 标头，它们从服务器发送以响应您的请求。

只需将它们从您的 xhr 请求代码中完全删除即可。浏览器将为您添加 Origin 标头（您没有明确指定它），maps.googleapis.com 的服务器应该添加所需的 CORS 响应标头（Access-Control-Allow-Origin 和可能的其他一些标头） .

如果在那之后您仍然遇到问题，请为 GET 请求（如果有的话，为预检 OPTIONS 请求）发布一整套请求和响应标头。

编辑以下评论

好的，这就是我从您的 cmets 中看到的内容（格式化）：

var xhr = new XMLHttpRequest();
xhr.open("GET", 'maps.googleapis.com/maps/api/place/queryautocomplete/…{' + 
searchString + '}&types=address&language=en&crossDomain=true&key=[ourKey]', 
true);
xhr.onload = function () {
    var response = JSON.parse(xhr.responseText);
    //do something with the response
};
xhr.send();

Errors: SEC7120: Origin http://[ourUrl] not found in Access-Control-Allow-Origin header. File: ClientApiWrapper.aspx

GET /maps/api/place/queryautocomplete/json?input={55%20saddl}&types=address&language=en&crossDomain=true&key=[ourKey] HTTP/1.1
Accept: / 
Referer: http://[ourURL]/[ourOrg]/form/ClientApiWrapper.aspx?ver=1166920881
Accept-Language: en-CA
Origin: http://[ourURL]
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; rv:11.0) like Gecko
Host: maps.googleapis.com
Connection: Keep-Alive
Cache-Control: no-cache

HTTP/1.1 200 OK
Content-Type: application/json; charset=UTF-8
Date: Wed, 25 Apr 2018 16:26:36 GMT
Expires: Wed, 25 Apr 2018 16:31:36 GMT
Cache-Control: public, max-age=300
Server: scaffolding on HTTPServer2
X-XSS-Protection: 1; mode=block
X-Frame-Options: SAMEORIGIN

好的，所以浏览器正在发送 Origin 标头。这意味着您的服务器需要返回一些 CORS 响应标头。

因此，您需要在服务器上添加代码，以便为 OPTIONS、GET 和 POST 请求返回以下 CORS 响应标头：

Access-Control-Allow-Origin: <value of Origin request header>

（我的意思是服务器应该提取 Origin 请求标头的值（即http://[ourURL]）并将其作为Access-Control-Allow-Origin 响应标头的值返回。不要将其硬编码为'@ 987654332@' - 这就是疯狂！）。

您还需要仅为 OPTIONS 请求返回以下额外的 CORS 标头：

Access-Control-Allow-Methods: <value-of-Access-Control-Request-Method request header>
Access-Control-Allow-Headers: <value-of-Access-Control-Request-Headers request header>
Access-Control-Max-Age: 86400

最后一个指定浏览器应该缓存预检 OPTIONS 响应的秒数，因此不需要每次都进行。它是可选的，但建议使用。 86400 秒 = 1 天。

这应该能让你继续前进。