Вызов API из надстройки Word Web (Office.Js) не работает: проблема CORS?


Друзья,

Я пытаюсь вызвать API из надстройки Word и получаю ошибку "Доступ запрещен". Я провел небольшое исследование, и похоже, что причиной этого является "совместное использование ресурсов из разных источников".

1. Web API

Я размещаю Web API 2 локально в "http://localhost:61546/api/ORG_NAMES " & Я разрешил CORS принимать все исходные данные, см. ниже WebApiConfig.

public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // Web API configuration and services
            var cors = new EnableCorsAttribute("*", "*", "*");
            config.EnableCors(cors);

            // Web API routes
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }

2. Тестовое Приложение

Чтобы проверить этот API, чтобы убедиться, что он поддерживает CORS, я создал ниже страницу и разместил на localhost: 52799 / home.html, я смог получить ожидаемый ответ. Я проверил это в IE 10 и Chrome.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("button").click(function () {
            var obj;
            .support.cors = true;
            $.getJSON("http://localhost:61546/api/ORG_NAMES/112233",
                function (data) {
                alert(data.ORG_ID);
            });
        });
    });
    </script>
</head> 
<body>
    <button>Click me</button>
</body>

3. Слово Надстройка

Теперь я хотел вызвать этот API из моей надстройки Word Web. Надстройка Word, запущенная с другого хоста https://localhost:44339/, см. ниже код. Здесь getJSON возвращает "Доступ запрещен".

      var OrgID; 
      $.getJSON("http://localhost:61546/api/ORG_NAMES/112233",
             function (data) {
                 OrgID = data.ORG_ID;
             });

Кроме того, когда я вызываю API из надстройки word, это не будет fiddler.

Примечание: это проект" Web Add-ins --> Word Add-in".

4. Исправить-Нужна Помощь

Не уверен, почему я получаю ошибку "отказано в доступе" от Word-Add-In, если CORS является проблемой, то мое тестовое приложение (#2) не должно было работать, правильно ?

Я попытался вызвать JSON, используя "$.ajax", "XMLHttpRequest", но это не сработало.Возможно, мне не хватает некоторых параметров конфигурации.

Ценю любую помощь здесь. Дайте мне знать, если вам понадобится дополнительная информация.

3 2

3 ответа:

Поскольку это звучит как проблема только в надстройке Office, а не на обычной странице, вы пробовали установить свой AppDomains в файле манифеста? См. раздел "укажите домены, которые вы хотите открыть в окне надстройки" в https://dev.office.com/docs/add-ins/overview/add-in-manifests

<?xml version="1.0" encoding="UTF-8"?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="TaskPaneApp">
<Id>c6890c26-5bbb-40ed-a321-37f07909a2f0</Id>
<Version>1.0</Version>
<ProviderName>Contoso, Ltd</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<DisplayName DefaultValue="Northwind Traders Excel" />
<Description DefaultValue="Search Northwind Traders data from Excel"/>
<AppDomains>
    <AppDomain>https://www.northwindtraders.com</AppDomain>
</AppDomains>
<DefaultSettings>
    <SourceLocation DefaultValue="https://www.contoso.com/search_app/Default.aspx" />
</DefaultSettings>
<Permissions>ReadWriteDocument</Permissions>
</OfficeApp>

Вам не понадобится Jsonp, если вы делаете вызовы Ajax. Вам нужно будет убедиться, что вы все запускаете с HTTPS, если он запускается в HTTP, он заблокирует этот трафик. Помните, что office-js back bone является IE и существует для; в целях безопасности api будет разрешать только HTTPS

Обновить

Помните, что надстройка office-js-это фактически два проекта, и вы должны убедиться, что ваши проекты запускаются в HTTPS. Кроме того, я бы просто посмотрел на файл манифеста и посмотрите на свой источник и убедитесь, что это точка на HTTPS

У меня была такая же проблема, используя ajax не мог позвонить web-api.NET MVC.

Сторона веб-api (сторона сервера):

  1. реализовать CORS в Web api, потому что excel office.js работает на другом порту и связывает прокси-объект сервера внутри excel, в то время как веб-api хранятся на другом порту, так что это так же хорошо, как иметь 2 различных домена на локальном, так что браузер автоматически блокирует запрос.

Таким образом, требуется совместное использование ресурсов из разных источников.

  1. включите Https для веб-API. http://csharp-video-tutorials.blogspot.com/2016/09/aspnet-web-api-enable-https.html

Клиентская сторона

  1. Просто сделайте вызов с помощью ajax, как показано ниже. url: 'https://localhost:44319/api/Default/PostItems ' Примечание: https: обязательно требуется .

    function makeAjaxCall(rangeJSON) {
    
    $.ajax({
        url: 'https://localhost:44319/api/Default/PostItems',
        type: 'POST',
        data: rangeJSON,
        contentType: 'application/json;charset=utf-8',
    }).done(function (data) {
        console.log(data)
      app.showNotification(data.Status, data.Message);
    }).fail(function (status) {
       app.showNotification('Error', 'Could not communicate with the server.');
        }).always(showResponse);
    
    }
    
    
    function exceltojson() {
    Excel.run(function (ctx) {
    
        var range = ctx.workbook.worksheets.getItem("Sheet1").getRange("A1:BO765");
    
        range.load("values, numberFormat");
    
        ctx.sync().then(
            function () {
    
               makeAjaxCall(JSON.stringify(range.values));
    
            }).catch(function (error) {
                console.log(error);
    
            });
    });
    
    
    function showResponse(object) {
    
        console.log(object);
        $("#output").text(JSON.stringify(object,null, 4));
    }