从源“https://excel.officeapps.live.com”访问“https://localhost:8000/lib/functions.json”处的 XMLHttpRequest 被 CORS 策略阻止

Question

我正在尝试通过 JavaScript API 在 Excel 中开发自定义函数。环境是 Mac OS 和 Excel Online (Chrome)。

我按照教程并通过

npx office-addin-dev-certs install

安装证书。我可以在 Excel Online 中找到并运行定义的自定义函数。我们可以看到

https://localhost:3000/dist/functions.json

在开发工具中加载良好。

现在，我想向我现有的一个应用程序添加自定义功能。我通过添加自定义功能的元素来修改清单文件，将

functions.json

和

functions.js

复制到

public/lib/

文件夹，以便可以在浏览器中打开

https://localhost:8000/lib/functions.json

。然后我使用相同的证书启动应用程序：

PORT=8000 HTTPS=true SSL_CRT_FILE=/Users/softtimur/.office-addin-dev-certs/localhost.crt SSL_KEY_FILE=/Users/softtimur/.office-addin-dev-certs/localhost.key ./node_modules/.bin/react-scripts start

。但是我们可以看到，加载

https://localhost:8000/lib/functions.json

时，出现了CORS错误，并且名称

functions.json

左侧出现了红色错误图标；在

Preview

和

Response

选项卡下，我们看到

Failed to load response data: No data found for resource with given identifier

。

这是两张截图，左边是工作版本，右边是非工作版本：

有谁知道

https://localhost:8000/lib/functions.json

无法正常加载的原因是什么？

Answer 1

这可能是因为您没有将

Access-Control-Allow-Origin

标头设置为服务器 localhost:8000 的响应。比较截图，2个非工作案例的响应头没有“Access-Control-Allow-Origin: *”。

Office 加载项的 Yeoman 生成器的教程模板确实在 webpack.config.js 中进行了配置，如下所示。因此您可能需要对其他服务器执行类似的操作。

devServer: {
      headers: {
        "Access-Control-Allow-Origin": "*",
      },
}