Office JS CORS 问题

Question

我一直在尝试使用 Office JavaScript API 创建一个简单的函数来登录我公司在我的本地计算机上托管的本地服务器并获取响应。我使用Vue JS 作为我的前端框架，axios 用于 HTTP/S 请求。

这是 axios 调用的代码：

import Vue from "vue";
import Vuex from "vuex";

const axios = require('axios').default;

axios.defaults.crossDomain = true;
Vue.use(Vuex);

/**
 * Network interactions and state manager
 */
const Network = new Vuex.Store({
    state: {
        url: 'http://127.0.0.1', //localhost by default
        user: '',
        pass: ''
    },
    getters: {

    },
    mutations: {
        setLoginCreds(state, payload) {
            state.url = payload.url;
            state.user = payload.user;
            state.pass = payload.pass;
        },
    },
    actions: {
        async login(context, { url, user, pass }) {
            let route = '/core/loginguest';

            let path = url + route;

            await axios({
                url: path,
                method: 'POST',
                params: {
                    userid: user,
                    password: pass
                }
            }).then(response => {
                console.log(response)
                if (response.status == 200) {
                    context.commit('setLoginCreds', { url, user, pass })
                }
            }).catch(err => {
                console.log('Exception hit!')
                console.log(err)
            })
        },
    }
});

export default Network;

在 Word 上运行时，我在登录时收到以下错误（使用 Microsoft Edge 开发工具查看）：

SEC7120：[CORS] 源“https://localhost:3000”在“http”的跨域资源的 Access-Control-Allow-Origin 响应标头中未找到“https://localhost:3000” ://127.0.0.1/core/loginguest?userid=hari&password=hari1234'。

据我了解，CORS 问题源于服务器的响应标头中不存在 Access-Control-Allow-Origin: *，但在 Electron.js 上使用相同的调用时我没有遇到这种情况。

这只是另一个让我受制于服务器的 CORS 问题，还是我可以从客户端控制的东西？

Answer 1

为了澄清，OP 询问为什么托管在localhost:3000 的加载项无法调用localhost:80 的本地服务器 - 遇到 CORS 问题。

这是意料之中的。以下是一些可供查看的资源：

• https://www.w3.org/Security/wiki/Same_Origin_Policy
• https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

来源由 URL 的方案、主机和 端口 定义。

当 Web 应用程序请求的资源与其自己的来源（域、协议或端口）不同时，它会执行跨域 HTTP 请求。

在您的情况下，端口不同，因此您必须在服务器上启用 CORS。默认情况下它是不允许的，所以无论你的配置是什么，你都必须更新它。

从 Postman 调用同一个端点时没有这个问题的原因是，因为 Postman 不是浏览器，因此不受 CORS 规则的约束。当您通过浏览器从一个资源调用另一个资源时，CORS 将适用。对于来自非浏览器来源的请求，您不会遇到此问题。

这里有几个关键答案：

• 基于触摸的 CORS/邮递员：How to prevent non-browser clients from sending requests to my server
• 同域CORS / CORS error on same domain?

Answer 2

您可以实施一个小技巧，我不知道您的情况是否可行。

您可以通过 Exchange 和您的插件设置 NGINX。

您可以将 NGINX 上的 /your/api/route 之类的路由映射到您的应用程序，其余所有调用都可以转移到 Exchange 处理。

server{
    server_name yourdomain.tld;

    # Requests to be managed by your add-in
    location /api {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    # Requests to be managed by exchange
    location / {
        proxy_pass http://localhost:4000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    listen 80;
}

通过这样做，交换和您的加载项将在同一个端口上工作（无论您配置什么），然后 cors 就不会成为问题。