AJAX跨域资源共享设置CORS响应头

2024-01-07 16:19:57

跨域资源共享 (CORS)：跨越界限，实现跨域通信

在浩瀚的互联网世界中，网站和应用程序之间的互动无处不在。但当它们来自不同的源（即不同的域、协议或端口）时，就会出现一个障碍：跨域请求受限。为了跨越这些界限，Web 创造了跨域资源共享（CORS），它允许不同来源之间的浏览器和服务器进行安全通信。

前端设置 CORS 请求头

要启动 CORS 跨域请求，前端应用程序必须在请求中包含特定的请求头。最关键的请求头是 Origin ，它指定了请求的来源。浏览器将 Origin 头发送到服务器，服务器根据该头决定是否允许跨域访问。

后端设置 CORS 响应头

为了允许跨域访问，后端服务器需要在 HTTP 响应中设置 CORS 响应头。Access-Control-Allow-Origin 是最常用的响应头，它指定了允许访问资源的来源。服务器可以设置多个 Access-Control-Allow-Origin 响应头，以允许来自多个域的请求。

实例：JavaScript 实现 CORS 跨域请求

// JavaScript 代码

// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 打开连接
xhr.open("GET", "https://example.com/api/data", true);

// 设置请求头
xhr.setRequestHeader("Origin", "https://mydomain.com");

// 发送请求
xhr.send();

// 处理响应
xhr.onload = function() {
  if (xhr.status === 200) {
    // 请求成功
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  } else {
    // 请求失败
    console.error(xhr.statusText);
  }
};

实例：Java 设置 CORS 响应头

// Java 代码

// 在 Servlet 中添加 CORS 响应头
@Override
protected void doOptions(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
  response.setHeader("Access-Control-Allow-Origin", "*");
  response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
  response.setHeader("Access-Control-Allow-Headers", "Content-Type");
}