:9999/#/all-users:1 Access to XMLHttpRequest at 'http://127.0.0.1:8080/getAll' from origin 'http://localhost:9999' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. vue项目显示这个怎么解决
时间: 2024-04-09 13:27:11 浏览: 301
[js]轻便的XMLHttpRequest应用函数:downloadUrl()
这个错误是由于浏览器的跨域资源共享(CORS)策略导致的。浏览器会阻止从一个源(origin)获取资源,而该资源的响应头中没有包含正确的Access-Control-Allow-Origin头部。
要解决这个问题,你可以尝试以下几种方法:
1. 在后端服务器上设置正确的响应头部。在返回响应时,包括Access-Control-Allow-Origin头部,并将其设置为你的前端应用的域名(http://localhost:9999)。这样浏览器就会允许从该域名获取资源。
2. 如果你使用的是Vue CLI来启动开发服务器,你可以配置devServer选项来代理你的API请求。在vue.config.js文件中添加以下代码:
```javascript
module.exports = {
devServer: {
proxy: {
'/getAll': {
target: 'http://127.0.0.1:8080',
changeOrigin: true
}
}
}
}
```
这将把以`/getAll`开头的请求代理到`http://127.0.0.1:8080`上,绕过CORS限制。
3. 如果你只是在开发环境下遇到这个问题,你可以尝试使用浏览器插件来禁用CORS限制,如Chrome浏览器的CORS Unblock插件。
请记住,在生产环境中解决CORS问题时要小心,确保只允许来自受信任的域的请求访问你的API。
阅读全文