ChatGPT：SpringBoot解决跨域问题方法-手动设置请求头

在这里插入图片描述

这里的设置响应头是为了发送请求方还是接收请求方

设置响应头是为了发送请求方。具体来说，添加 Access-Control-Allow-Origin 头部是为了告诉浏览器，哪些域名可以访问资源。当设置为 * 时，表示允许所有域名访问。这个设置主要用于解决跨域资源共享（CORS）问题。

代码示例解释：

@RequestMapping("/index")
public String index(HttpServletResponse response) {
    response.addHeader("Access-Allow-Control-Origin", "*");
    return "index";
}

在这个代码中，当客户端（如浏览器）访问 /index 端点时，服务器会在响应头中添加 Access-Allow-Control-Origin: *，表示允许任何域名访问该资源。这样做的目的是让浏览器知道它可以接受该响应，即使请求来自于不同的域名。

需要注意的是，这种方式虽然方便，但使用 * 允许所有域名访问可能存在安全隐患，通常在生产环境中会指定具体的域名，而不是使用 *。

所以防止跨域是谁做出的举动呢

防止跨域请求的措施主要是由浏览器做出的。具体来说，浏览器会根据同源策略（Same-Origin Policy）来阻止从一个域名向另一个域名发起的未经授权的请求。

同源策略

同源策略是一种重要的安全机制，它阻止了一个源（域名、协议和端口）下的文档或脚本从另一个源请求资源。这意味着，只有当请求的资源与当前文档的源相同时，浏览器才会允许请求通过。

跨域资源共享 (CORS)

跨域资源共享（CORS, Cross-Origin Resource Sharing）是由服务器来决定是否允许跨域请求的一种机制。服务器通过设置适当的响应头来告诉浏览器，哪些源可以访问其资源。最常见的响应头是 Access-Control-Allow-Origin。

流程示意

浏览器发起请求：当浏览器检测到一个跨域请求时（如 AJAX 请求），它会首先发送一个预检请求（OPTIONS 请求）到服务器，询问服务器是否允许跨域请求。
服务器响应预检请求：服务器响应预检请求，并在响应头中包括 Access-Control-Allow-Origin 和其他 CORS 相关头部信息。
浏览器根据响应决定是否发出实际请求：如果服务器允许跨域请求，浏览器会继续发送实际的请求。如果服务器不允许，浏览器会阻止请求，并向客户端返回错误。

代码示例

在你的代码中，服务器通过设置响应头来允许跨域请求：

@RequestMapping("/index")
public String index(HttpServletResponse response) {
    response.addHeader("Access-Control-Allow-Origin", "*");
    return "index";
}

当浏览器接收到这个响应头时，它就知道可以接受该响应，即使请求来自于不同的源。

总结

防止跨域请求的主要措施是由浏览器实施的，同源策略确保了一个源无法未经授权访问另一个源的资源。服务器通过设置适当的 CORS 响应头，可以允许合法的跨域请求。

可是按下f12进行调试并没有看到有预检请求啊

并不是所有的跨域请求都会触发预检请求（OPTIONS 请求）。预检请求通常在以下情况中触发：

使用的 HTTP 方法不是 GET、POST 或 HEAD。
使用的自定义头部字段（如 X-Custom-Header）。
请求的内容类型（Content-Type）不是以下三种之一：
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain

如果你的跨域请求是一个简单请求（Simple Request），那么它不会触发预检请求。简单请求包括以下几种情况：

使用 GET、POST 或 HEAD 方法。
不包含自定义头部。
请求的内容类型是上述三种之一。

示例说明

假设你在使用 JavaScript 发起一个跨域请求：

fetch('http://example.com/index', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

这个请求是一个简单请求，不会触发预检请求。浏览器会直接发出 GET 请求，并根据服务器的响应头判断是否允许跨域。

如何查看请求头

在浏览器的开发者工具中，可以按以下步骤查看请求和响应头：

按 F12 打开开发者工具。
转到“Network”（网络）选项卡。
发起跨域请求。
在请求列表中找到对应的请求，点击它。
在右侧面板中查看“Headers”（头部）信息，包括请求头和响应头。

检查预检请求

如果你希望确认是否有预检请求被发出，可以尝试以下方法：

修改请求方法为非简单请求方法（如 PUT、DELETE 等）。
添加自定义头部字段（如 X-Custom-Header）。
修改请求的 Content-Type 为非简单请求的类型（如 application/json）。

例如：

fetch('http://example.com/index', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-Custom-Header': 'value'
  },
  body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));