如何在Dynamics CRM中通过CORS调用Google API

嘿，我看了你这段在CRM Web资源里写的Google API调用代码，发现几个关键问题，还有适配CRM环境的解决方案，帮你拆解一下：

1. 别再给请求加Access-Control-Allow-*头了！ #

你代码里这两行完全是反着来的：

xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
xhr.setRequestHeader('Access-Control-Allow-Methods', 'GET,POST');

Access-Control-Allow-Origin和Access-Control-Allow-Methods是服务器返回给浏览器的响应头，用来告诉浏览器“这个域名可以跨域访问我”，客户端请求的时候加这俩头不仅没用，还会触发浏览器的预检请求错误，直接删掉就行。

2. CRM前端跨域的坑得这么填 #

Dynamics CRM的Web资源跑在你CRM的专属域名下，直接从前端JS调用Google API大概率会碰到浏览器的CORS拦截（除非Google那边明确放行你的CRM域名）。这里有两个靠谱的解决思路：

方案A：用CRM后端代理调用（强烈推荐） #

把Google API的调用放到CRM后端的自定义Web API动作里，前端通过Xrm.WebApi调用这个动作就行。好处有俩：一是服务器端调用不受浏览器CORS限制，二是能把你的Google API密钥藏在后端，避免前端暴露被盗用（毕竟API密钥要是被人拿去刷请求，账单可就好看了）。

举个例子，先写后端C#插件实现自定义动作：

using System.Net.Http;
using System;
using Microsoft.Xrm.Sdk;

public class GooglePlacesAutocompleteAction : IPlugin
{
    public void Execute(IServiceProvider serviceProvider)
    {
        var context = (IPluginExecutionContext)serviceProvider.GetService(typeof(IPluginExecutionContext));
        var searchInput = context.InputParameters["SearchString"].ToString();
        var apiKey = "[你的Google API密钥]";

        using (var httpClient = new HttpClient())
        {
            // 记得对搜索内容做URL编码，避免特殊字符搞砸请求
            var encodedInput = Uri.EscapeDataString(searchInput);
            var requestUrl = $"https://maps.googleapis.com/maps/api/place/queryautocomplete/json?input={encodedInput}&types=address&language=en&key={apiKey}";
            
            var response = httpClient.GetAsync(requestUrl).Result;
            response.EnsureSuccessStatusCode(); // 确保请求成功
            var resultContent = response.Content.ReadAsStringAsync().Result;
            
            // 把结果返回给前端
            context.OutputParameters["AutocompleteResults"] = resultContent;
        }
    }
}

然后前端JS调用这个自定义动作：

// 构造自定义动作请求
var autocompleteRequest = {
    getMetadata: function () {
        return {
            boundParameter: null,
            parameterTypes: {
                "SearchString": {
                    "typeName": "Edm.String",
                    "structuralProperty": 1
                }
            },
            operationType: 0,
            operationName: "new_GooglePlacesAutocomplete" // 替换成你自定义动作的名称
        };
    },
    SearchString: searchString // 你的搜索输入内容
};

// 执行请求
Xrm.WebApi.online.execute(autocompleteRequest).then(
    function (response) {
        if (response.ok) {
            return response.json();
        }
        throw new Error(`请求失败，状态码：${response.status}`);
    },
    function (error) {
        console.error("调用自定义动作出错:", error.message);
    }
).then(function (results) {
    // 这里处理Google返回的自动完成结果
    if (results.status === "OK") {
        console.log("自动完成建议:", results.predictions);
        // 把建议渲染到页面上
    } else {
        console.error("Google API返回错误:", results.error_message);
    }
});

方案B：给Google API配置允许你的CRM域名 #

如果你一定要前端直接调用，得去Google Cloud Console里给你的API密钥配置允许的HTTP referrers，把你的CRM域名加进去（比如https://your-crm-instance.crm.dynamics.com/*）。同时要确保你已经启用了Google Places API，并且密钥有对应的权限。

另外，你代码里的URL用了&，这是HTML转义字符，在JS里直接用&就行，不然会被当作URL的一部分导致参数解析错误。修正后的URL应该是：

var requestUrl = `https://maps.googleapis.com/maps/api/place/queryautocomplete/json?input=${encodeURIComponent(searchString)}&types=address&language=en&key=[ourKey]`;
xhr.open("GET", requestUrl, true);

3. 完善错误处理，避免踩坑 #

你代码里的xhr.onload只处理了成功的情况，建议加上完整的错误处理逻辑，比如：

xhr.onerror = function() {
    console.error("网络错误，无法连接Google API");
};

xhr.onload = function () {
    if (xhr.status >= 200 && xhr.status < 300) {
        var response = JSON.parse(xhr.responseText);
        if (response.status === "OK") {
            // 处理自动完成建议
            console.log("建议列表:", response.predictions);
        } else {
            console.error("Google API返回错误:", response.error_message);
        }
    } else {
        console.error("HTTP请求失败，状态码:", xhr.status);
    }
};

最后再啰嗦一句，前端暴露API真的有风险，能放后端就尽量放后端，不然哪天密钥被人拿去刷请求，哭都来不及😅

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