Office JS CORS issue

Question

我一直在尝试使用Office JavaScript API创建一个简单的函数，以登录到我所在公司的本地机器上的on-prem服务器并获取响应。我使用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"未找到"https://localhost:3000'的跨源资源的访问控制允许源响应标头中http://127.0.0.1/core/loginguest?userid=hari&密码=hari234'。

据我所知，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/Postman：如何防止非浏览器客户端向我的服务器发送请求
• 同一域上的同一域CORS/CORS错误

Answer 2

你可以实现一个小破解，我不知道在你的情况下是否可能。

您可以通过Exchange和外接程序设置NGINX。

您可以将像NGINX上的/your/api/route这样的路由映射到您的应用程序，并且所有其他调用都可以转移到交换机进行处理。

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将不会成为问题。