Question

我正在使用jQuery和Office JS API构建Outlook加载项。我在开发时正在使用本地服务器，并且正在尝试向站点主服务器上的端点提交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 fetch from within Outlook add-ins

唯一的答案说要做三件事：

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

将服务URL添加到清单的AppDomains列表中。是的，也是。这来自我的manifest.xml：

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

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

我还找到了该文档（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。我的https://myurl.com服务器日志中也没有看到请求ping。当我尝试从Outlook加载项ping https://myurl.com时，这是网络请求的输出：

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：就其价值而言，除了运行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

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

服务器响应您的pre-flight请求（通常为OPTIONS），并且不允许获得响应，这是因为服务器端不允许您的来源localhost:3000。

您需要使用OPTIONS代码和标头来响应服务器上的204 status，

Access-Control-Allow-Origin 'localhost';

Office加载项：由于访问控制检查，XMLHttpRequest无法加载XXX

1 个答案: