Надстройка Office: XMLHttpRequest не может загрузить XXX из-за проверок контроля доступа

Question

Я создаю надстройку Outlook с помощью jQuery и API Office JS. Во время разработки у меня работает локальный сервер, и я пытаюсь отправить POST-запрос конечной точке на главном сервере моего сайта. Каждый раз, когда я пытаюсь отправить запрос, я получаю следующие три ошибки:

Origin https://localhost:3000 is not allowed by Access-Control-Allow-Origin

XMLHttpRequest cannot load https://myurl.com/my_endpoint due to access control checks

Failed to load resource: Origin https://localhost:3000 is not allowed by Access-Control-Allow-Origin

Что я сделал до сих пор:

Найдена эта связанная ветка: HTTP-выборка из надстроек Outlook

Единственный ответ говорит о том, чтобы сделать три вещи:

1. Сделайте запрос с XMLHttpRequest. Да, сделал это:

function submitForm(var1, var2) {
    var http = new XMLHttpRequest();
    var params = 'var1=' + encodeURIComponent(var1) + '&var2=' + encodeURIComponent(var2);
    http.open("POST", 'https://myurl.com/my_endpoint', true);
    http.setRequestHeader('Access-Control-Allow-Origin', 'https://localhost:3000');
    http.setRequestHeader('Access-Control-Allow-Credentials', true);
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    http.onreadystatechange = function() {
        console.log("response:", http.responseText);
        console.log("status:", http.status);
    };
    http.send(params);
}

2. Добавьте URL-адрес службы в список доменов манифеста. Да, сделал это тоже. Это из моего manifest.xml:

<AppDomains>
    <AppDomain>https://myurl.com</AppDomain>
    <AppDomain>https://myurl.com/my_endpoint</AppDomain>
    <AppDomain>https://localhost:3000</AppDomain>
</AppDomains>

3. Используйте только те службы, которые подключены через SSL. Да, сервер myurl.com доступен только через SSL.

Я также нашел эту документацию (https://docs.microsoft.com/en-us/office/dev/add-ins/develop/addressing-same-origin-policy-limitations), которая рекомендует решить эту проблему с помощью совместного использования ресурсов между источниками (CORS), и указывает на эту ссылку: https://www.html5rocks.com/en/tutorials/file/xhr2/#toc-cors

Итак, я проверил настройку сервера для https://myurl.com и фактически разрешаю запросы из любого источника. ОБНОВЛЕНИЕ 1: в качестве примера, вот как выглядит результат успешного сетевого запроса к https://myurl.com/my_endpoint (обратите внимание на заголовок Accept: */*):

Request URL: https://myurl.com/my_endpoint
Request Method: POST
Status Code: 200 OK
Referrer Policy: no-referrer-when-downgrade
Cache-Control: no-cache, no-store, must-revalidate, public, max-age=0
Connection: keep-alive
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
Expires: 0
Pragma: no-cache
Server: nginx/1.10.3 (Ubuntu)
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Content-Length: 52
Content-type: application/x-www-form-urlencoded
Host: myurl.com
Origin: chrome-extension://focmnenmjhckllnenffcchbjdfpkbpie
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
var1: var1
var2: var2

Кроме того, еще одна вещь, заставляющая меня думать, что проблема не в https://myurl.com, заключается в следующем: когда я открываю вкладку сети в моем отладчике, я вижу, что мой запрос никогда не достигает https://myurl.com. I я также не вижу пинг запросов в моих https://myurl.com журналах сервера. Это вывод моего сетевого запроса, когда я пытаюсь пропинговать https://myurl.com из надстройки Outlook:

Summary
URL: https://myurl.com/my_endpoint
Status: —
Source: —

Request
Access-Control-Allow-Origin: https://localhost:3000
Access-Control-Allow-Credentials: true
Content-Type: application/x-www-form-urlencoded
Origin: https://localhost:3000
Accept: */*
Referer: https://localhost:3000/index.html?_host_Info=Outlook$Mac$16.02$en-US
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14) AppleWebKit/605.1.15 (KHTML, like Gecko)

Response
No response headers

Request Data
MIME Type: application/x-www-form-urlencoded
var1: var1
var2: var2

Любые рекомендации, что еще мне нужно изменить, чтобы разрешить отправку запроса POST на myurl.com? Заранее спасибо доброй душе, которая помогает мне понять это.

ОБНОВЛЕНИЕ 2: Что бы это ни стоило, я не выполнил никаких настроек для моего сервера узлов, кроме того, что было готово, когда я запустил npm install -g generator-office. Например. Я не трогал эти два файла:

.babelrc

{
    "presets": [
        "env"
    ]
}

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        polyfill: 'babel-polyfill',
        app: './src/index.js',
        'function-file': './function-file/function-file.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.html$/,
                exclude: /node_modules/,
                use: 'html-loader'
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: 'file-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            chunks: ['polyfill', 'app']
        }),
        new HtmlWebpackPlugin({
            template: './function-file/function-file.html',
            filename: 'function-file/function-file.html',
            chunks: ['function-file']
        })
    ]
};

Answer 1

Не удалось загрузить ресурс: Origin https://localhost:3000 не разрешен Access-Control-Allow-Origin

Сервер отвечает на ваш запрос pre-flight (обычно OPTIONS) и не позволяет получить ответ, потому что ваше происхождение localhost:3000 не разрешено на стороне сервера.

Вам необходимо ответить на OPTIONS на сервере с кодом 204 status и заголовком, например:

Access-Control-Allow-Origin 'localhost';