vue blocked by CORS policy: No Access-Control-Allow-Origin header is present on the requested resource.
时间: 2023-12-06 22:38:43 浏览: 100
解决方案 ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’
5星 · 资源好评率100%
跨域资源共享(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等技术进行跨域请求。
阅读全文