vue开发中，向服务器请求数据发生跨域，无法得到服务器json数据问题

Question

问题：

在开发一个vue小项目，后台用nodejs搭的,向服务器发送正确的用户名密码会得到一个token，用postman可以正确获得。但是在vue里怎么实现？

postman 截图：

Vue 的代码如下：

结果报错是这样的：

XMLHttpRequest cannot load http://localhost:8000/api/aut... Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

Uncaught (in promise) Response {url: "http://localhost:8000/api/authenticate", ok: false, status: 0, statusText: "", headers: Headers…}

请问怎么才能做到传一个jsond对象给服务器，然后获取服务器返回的json对象，然后在页面能够获取（渲染）？

如果能提供demo或者代码的话，感激不尽。

Answer 1

app.all('*', (req, res, next) => {
  var origin = req.headers.origin;
  res.header('Access-Control-Allow-Origin', origin);
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, token');
  res.header('Access-Control-Allow-Credentials', true);
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, OPTIONS, DELETE');
  next()
});

最简单来说，是这样的，在express下。当然你应该对origin进行下限制，设置一个 白名单。
ruanyif

MDN

Answer 2

如果仅在开发时端口不同，上线是从同一个服务中取数据，可设置webpack-dev-server的proxy来解决。
但是如果要取的数据确实是跨域服务的。并且项目对兼容性要求不高，那可以使用cors技术。通过设置http请求头即可。不过这个需要前后端都进行修改。

Answer 3

你好，请问你最后解决了吗? 我也是遇到了这个问题，按照vue-resource提供的跨域方法，但是还是实现不了跨域，遇到如同你的问题，请问你解决了吗？请求分享