vue CORS error 跨域问题 解决方法_cors error浏览器报错

浏览器报错

Access to XMLHttpRequest at 'http://localhost:9070/rooms' from origin
 'http://localhost:8080' has been blocked by CORS policy:
  No 'Access-Control-Allow-Origin' header is present on the requested resource.
1
2
3

这个错误提示是因为浏览器的同源策略（Same-Origin Policy）限制了跨域请求。在默认情况下，浏览器只允许在同一域名下的请求，如果请求的域名不同，就会出现CORS错误。

要解决这个问题，需要在后端服务器上设置CORS头部，允许跨域请求。具体的方法是在后端服务器的响应头部中添加Access-Control-Allow-Origin头部，指定允许跨域请求的域名。

如果你使用的是Spring Boot框架，可以在Controller类或方法上添加@CrossOrigin注解，指定允许跨域请求的域名。例如：

@RestController
@CrossOrigin(origins = "http://localhost:8080")
public class RoomController {
    @GetMapping("/rooms")
    public List<Room> getRooms() {
        // ...
    }
}
1
2
3
4
5
6
7
8

这样就可以允许来自http://localhost:8080域名的跨域请求了。

如果你使用的是其他后端框架，可以查阅相应的文档，了解如何设置CORS头部