我正在使用 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 inside 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 连接下的服务。是的，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。我也没有在我的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']
})
]
};