vue 图片请求报错has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
时间: 2023-10-17 07:26:55 浏览: 143
这个错误通常是由于浏览器的安全策略引起的。浏览器默认情况下不允许从一个源(例如:http://example.com)请求另一个源(例如:http://api.example.com)的资源,除非响应头中包含了正确的跨域资源共享(CORS)标头。
要解决这个问题,你可以在服务器端添加相应的响应头来允许跨域请求。在返回图片资源时,服务器需要设置`Access-Control-Allow-Origin`标头为允许访问的域名或使用通配符`*`来允许所有域名访问。
下面是一个示例,可以通过在服务器端设置响应头来解决跨域问题:
```javascript
// Express.js 示例
const express = require('express');
const app = express();
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
next();
});
// 处理图片请求
app.get('/image', (req, res) => {
// 返回图片
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
```
请注意,使用通配符`*`允许所有域名访问可能存在安全风险。在实际生产环境中,应该根据实际需求设置合适的`Access-Control-Allow-Origin`值。
如果你无法更改服务器端的设置,你也可以尝试使用代理服务器或者在开发环境中启用跨域请求的配置。具体方法可能会根据你使用的开发工具和服务器环境而有所不同。
阅读全文
相关推荐

















