xmlhttprequest - Office 加载项 : XMLHttpRequest cannot load XXX due to access control checks

Question

我正在使用 jQuery 和 Office JS API 构建一个 Outlook 加载项。我在开发时有一个本地服务器正在运行，我正在尝试向我站点的主服务器上的端点提交一个 POST 请求。每次尝试提交请求时，我都会收到以下三个错误:

Access-Control-Allow-Origin 不允许来源 https://localhost:3000

由于访问控制检查，XMLHttpRequest 无法加载 https://myurl.com/my_endpoint

无法加载资源:Access-Control-Allow-Origin 不允许来源 https://localhost:3000

到目前为止我做了什么:

找到此相关主题:HTTP fetch from within Outlook add-ins

唯一的答案是做三件事:

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);
}

1. 将服务 URL 添加到 list 的 AppDomains 列表中。是的，也这样做了。这是来 self 的 manifest.xml:

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

1. 仅使用 SSL 连接下的服务。是的，myurl.com 服务器只能通过 SSL 访问。

我还找到了这个文档 ( https://learn.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: */* header ):

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 中看到请求 ping服务器日志。这是我尝试 ping 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

关于我还需要更改哪些内容才能向 myurl.com 发出 POST 请求，有什么建议吗？提前感谢帮助我解决这个问题的好心人。

更新 2:就其值(value)而言，除了运行 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

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

服务器响应了你的pre-flight请求(通常是OPTIONS)并且不允许得到响应，那是因为你的源localhost:3000 在服务器端是不允许的。

您需要使用 204 status 代码和标题响应服务器上的 OPTIONS:

Access-Control-Allow-Origin 'localhost';