使用Vue配合Express框架构建SPA应用遇到的"Access-Control-Allow-Origin"问题

问题:Access-Control-Allow-Origin

Access to XMLHttpRequest at 'http://127.0.0.1:3000/api/xxx?page=1' 
from origin 'http://localhost:8080' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

原因

跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议，端口，域名。只要这个3个中有一个不同就是跨域。 这里列举一个经典的列子：

协议跨域
http://a.baidu.com访问https://a.baidu.com；
端口跨域
http://a.baidu.com:8080访问http://a.baidu.com:80；
域名跨域
http://a.baidu.com访问http://b.baidu.com；

现在很多公司都是采用前后分离的方式开发。那么出现经常和会跨域打交道。这里前端使用的Vue，后端使用的NodeJs。

解决办法

在express入口文件引入express之后加上

app.use("*", function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    if (req.method === 'OPTIONS') {
        res.send(200)
    } else {
        next()
    }
});

重启express服务器。
在开发阶段可以解决Access-Control-Allow-Origin的问题。