CORS之跨域通信解析

前端

2024-01-28 14:59:41

前言

在现代前端开发中，跨域通信是一个非常常见的问题。由于浏览器同源策略的限制，不同域名、协议或端口之间的通信会被禁止。这使得前端开发人员无法直接从服务器获取数据，也无法向服务器发送请求。

CORS简介

CORS(跨域资源共享)是一组规范，它允许浏览器在某些情况下绕过同源策略的限制，从而实现跨域通信。CORS允许服务器端指定哪些源可以访问其资源，以及这些源可以执行哪些操作。

CORS工作原理

CORS的工作原理如下：

客户端发送一个请求到服务器。
服务器收到请求后，检查请求头中的Origin字段，该字段表示请求的来源。
如果请求的来源在服务器的CORS允许列表中，服务器将返回一个Access-Control-Allow-Origin头，该头指定了允许访问服务器资源的来源。
客户端收到响应后，检查响应头中的Access-Control-Allow-Origin头，如果该头存在且与请求的Origin字段匹配，则允许跨域通信。

CORS使用方式

要使用CORS，需要在服务器端进行配置。服务器端需要在响应头中添加Access-Control-Allow-Origin头，该头指定了允许访问服务器资源的来源。

Access-Control-Allow-Origin: *

上面的配置表示允许所有来源访问服务器资源。也可以指定具体的来源，例如：

Access-Control-Allow-Origin: https://www.example.com

上面的配置表示只允许来自https://www.example.com的请求访问服务器资源。

CORS常见解决方案

除了使用CORS，还有其他几种常见的跨域解决方案，包括：

JSONP
WebSocket
代理

JSONP是一种使用<script>标签加载跨域资源的技术。WebSocket是一种双向通信协议，可以用于实现跨域通信。代理是一种服务器端的解决方案，它可以将请求转发到另一个服务器，从而绕过同源策略的限制。

后端DEMO源码

@CrossOrigin
@RestController
public class CORSController {

    @GetMapping("/api/data")
    public String getData() {
        return "Hello from CORS!";
    }
}

前端DEMO源码

<!DOCTYPE html>
<html>
<head>
    
</head>
<body>
    <button onclick="fetchData()">Fetch Data</button>

    <script>
        function fetchData() {
            fetch('http://localhost:8080/api/data')
                .then(response => response.text())
                .then(data => {
                    console.log(data);
                })
                .catch(error => {
                    console.error(error);
                });
        }
    </script>
</body>
</html>