Надстройка 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/

Итак, я проверил настройку сервера для 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/. Я также не вижу, что запрос пингует в моих журналах 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';