问题: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的问题。