has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
"has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource." 是一个常见的跨域问题。这表示你的浏览器阻止了从不同源的服务器获取资源,这是为了保护用户的安全性。
CORS(Cross-Origin Resource Sharing)是一种机制,它允许许多安全策略被放宽的情况下进行跨站点 HTTP 请求。
解决这个问题的一般方法是:
在服务端设置
Access-Control-Allow-Origin
HTTP 头。例如,如果你使用的是 Express.js,可以像这样设置:app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*"); // '*' 允许所有来源的访问,你也可以设置特定的 IP 来限制访问来源
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
请注意,对于预检请求(比如 PUT,DELETE,等一些需要先发送 OPTIONS 请求的 HTTP 方法),你可能还需要设置以下两个头:
res.header('Access-Control-Allow-Methods', '*');
res.header('Access-Control-Allow-Headers', '*');
如果你不能修改服务器来添加这些头,但仍然需要在开发期间绕过此问题,你可以使用代理或者一些浏览器插件。
另外,如果你在开发过程中遇到了这个问题,很多现代框架(如 create-react-app, vue-cli)都提供了一个开发服务器,它可以将请求代理到后端服务器,从而避免这个问题。
请注意 CORS 是一种重要的安全性机制,不应该在生产环境中被轻易绕过。因此,在实际部署时,你应该确保正确地配置了 Access-Control-Allow-Origin
头,以及其他相关的CORS