前端使用vue-cropp请求阿里云oss图片时No 'Access-Control-Allow-Origin' header is present on the requested resource
时间: 2023-07-11 20:59:41 浏览: 61
这个错误是因为浏览器的同源策略(Same Origin Policy)导致的。浏览器会阻止从一个域名下的网页去请求另一个域名下的资源。所以你向阿里云oss请求图片时,由于请求的域名与阿里云oss的域名不同,浏览器会拦截该请求并报出上述错误。
解决这个问题的方法是在阿里云oss的服务器上设置CORS(跨域资源共享)规则,允许指定的域名访问该服务器上的资源。具体操作可以参考阿里云官方文档:https://help.aliyun.com/document_detail/31925.html。在设置CORS规则后,你就可以在前端代码中请求阿里云oss上的图片了。
相关问题
vue No 'Access-Control-Allow-Origin' header is present on the requested resource.
当在Vue应用中发起跨域请求时,可能会遇"No 'Access-Control-Allow-Origin' header is present on the requested resource"的错误。这是由于浏览器的同源策略所导致的安全限制。
同源策略要求浏览器只能向同一域名、端口和协议发起请求,而不能跨域请求。当Vue应用向不同域名或端口发起请求时,浏览器会发送一个预检请求(OPTIONS请求)来检查服务器是否允许跨域请求。
要解决这个问题,可以在服务器端进行配置,允许跨域请求。以下是一些解决方法:
1. 在服务器端设置响应头:在服务器端的响应中添加"Access-Control-Allow-Origin"头,并设置为允许访问的域名。例如,可以设置为"*"表示允许所有域名访问。
2. 使用代理:在开发环境中,可以配置一个代理来转发请求,绕过浏览器的同源策略。可以使用Vue CLI提供的代理功能或者使用其他代理工具。
3. JSONP:如果服务器不支持设置响应头,可以考虑使用JSONP来进行跨域请求。JSONP利用了<script>标签不受同源策略限制的特性来实现跨域请求。
4. CORS插件:如果你使用的是浏览器插件进行开发调试,可以尝试安装一个CORS插件来绕过同源策略。
vue blocked by CORS policy: No Access-Control-Allow-Origin header is present on the requested resource.
跨域资源共享(CORS)是一种机制,它使用额外的HTTP头来告诉浏览器让运行在一个origin(域)上的Web应用被准许访问来自不同源服务器上的指定的资源。如果一个资源的访问没有得到允许,那么就会出现“blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.”的错误提示。解决这个问题的方法有以下几种:
1.在服务端设置Access-Control-Allow-Origin头部信息,允许跨域访问。例如,在Node.js中,可以使用cors模块来设置:
```javascript
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
```
2.使用代理服务器,将请求转发到目标服务器。例如,在vue.config.js中配置代理:
```javascript
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
```
3.在前端使用JSONP或者WebSocket等技术进行跨域请求。