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

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



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

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

代码示例解释:

java 复制代码
@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

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

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

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

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

总结

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


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

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

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

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

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

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

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 请求,并根据服务器的响应头判断是否允许跨域。

如何查看请求头

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

  1. F12 打开开发者工具。
  2. 转到"Network"(网络)选项卡。
  3. 发起跨域请求。
  4. 在请求列表中找到对应的请求,点击它。
  5. 在右侧面板中查看"Headers"(头部)信息,包括请求头和响应头。
检查预检请求

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

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

例如:

javascript 复制代码
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));

此时,浏览器应该会先发出一个预检请求(OPTIONS),你可以在开发者工具的网络选项卡中看到这个预检请求。


相关推荐
Alive~o.07 分钟前
Go语言进阶&依赖管理
开发语言·后端·golang
许苑向上12 分钟前
Dubbo集成SpringBoot实现远程服务调用
spring boot·后端·dubbo
郑祎亦1 小时前
Spring Boot 项目 myblog 整理
spring boot·后端·java-ee·maven·mybatis
本当迷ya1 小时前
💖2025年不会Stream流被同事排挤了┭┮﹏┭┮(强烈建议实操)
后端·程序员
计算机毕设指导62 小时前
基于 SpringBoot 的作业管理系统【附源码】
java·vue.js·spring boot·后端·mysql·spring·intellij-idea
paopaokaka_luck2 小时前
[371]基于springboot的高校实习管理系统
java·spring boot·后端
捂月4 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
瓜牛_gn4 小时前
依赖注入注解
java·后端·spring
Estar.Lee4 小时前
时间操作[取当前北京时间]免费API接口教程
android·网络·后端·网络协议·tcp/ip
喜欢猪猪4 小时前
Django:从入门到精通
后端·python·django