问题:什么是跨域问题,具体都包含哪些内容,下面是灵码的给出来的答案,只能说仅供参考了,没办法说准确性,毕竟我不会。
跨域问题通常出现在Web开发中,特别是在涉及Ajax请求或Fetch API调用时。它源于浏览器实施的一种安全策略,称为同源策略(Same-origin policy)。
同源策略
同源策略是浏览器的一个核心安全特性,它限制了一个网页脚本能够访问的资源范围。根据同源策略,只有当请求和响应的来源(即协议、域名和端口)完全相同时,脚本才能读取响应数据。来源(或源)由以下三部分组成:
- 协议(如HTTP或HTTPS)
- 域名(如example.com)
- 端口(如80或443)
跨域问题的出现
当一个网页尝试从不同的源请求资源时,就产生了跨域问题。例如,一个在 http://example.com 上的网页尝试从 http://otherdomain.com 加载数据。在这种情况下,由于源不匹配,浏览器将阻止该请求返回的数据被脚本访问,即使服务器响应了请求。
为什么存在同源策略?
同源策略的存在是为了保护用户数据和防止恶意脚本。如果没有同源策略,一个恶意网站可以轻松地从另一个网站窃取敏感数据,例如银行信息或个人身份信息,这将严重威胁用户的隐私和安全。
下面是我遇到的问题,主要设计是上述的端口问题,前端的3000去请求后端的8080,具体错误如下
控制台输出如下,是preflight类型的错误,什么是preflight预检呢?请看灵码给出的解释
preflight
Preflight 请求是CORS(跨源资源共享)机制中的一部分,它是浏览器为了安全考虑而自动发起的一种请求,主要用于复杂的跨域请求前的“探路”。这种请求使用 HTTP 的 OPTIONS 方法,目的是为了确认服务器是否允许特定的跨域请求。
Preflight 请求的触发条件
Preflight 请求会在以下情况发生:
1.当请求的 HTTP 方法不是简单方法(GET、HEAD 或 POST)时,例如 PUT、DELETE 等。
2.当请求包含非简单头部,如 Content-Type 为 application/json 或自定义头部。
3.当请求使用了 credentials(如 cookies、HTTP 认证)并且方法不是 GET 或 HEAD。
Preflight 请求的工作流程
1.发送 OPTIONS 请求:浏览器首先发送一个 OPTIONS 请求到目标URL,这个请求包含了实际请求的预期方法和头部信息。
2.服务器响应:服务器需要在响应中包含 CORS 相关的头部,如 Access-Control-Allow-Origin、Access-Control-Allow-Methods 和 Access-Control-Allow-Headers。如果服务器允许预检请求中的方法和头部,它会返回一个成功的响应。
3.实际请求:如果预检请求成功,浏览器会继续发送实际的跨域请求。如果预检请求失败,浏览器将阻止实际请求的发送。
Preflight 请求的响应头部
Access-Control-Allow-Origin:指明哪些源可以访问资源。
Access-Control-Allow-Methods:列出允许的 HTTP 方法。
Access-Control-Allow-Headers:列出允许的请求头部。
Access-Control-Max-Age:可选,指明预检请求的结果可以缓存的时间(以秒为单位)。
处理 Preflight 请求
在服务器端,你需要确保你的 CORS 配置能够正确处理预检请求。这通常涉及到设置正确的响应头部。例如,在 Node.js 的 Express 应用中,你可以使用 cors 中间件来自动处理预检请求。
具体的请求信息如下,既然知道了是什么错误,需要的信息有哪些,接下来就是百度排错的时间了
第一步:搜索golang对应的cors插件,下载地址如下:
github.com/gin-contrib/cors
第二步:下载对应的插件,这个就很简单了,如图所示(凑字数的)
鼠标停在红色波浪线哪里,然后看提示出现了import这个,然后点击,等待即可,如果下载失败了就重新下载或者换一个下载。
第三步:就是一个漫长的试错过程,将我们上面百度到的需要添加的头部信息加进去,如果没问题,那万事大吉,如果有问题继续百度。毕竟"没有谁能随随便便成功,《真心英雄》":
“经历了三个小时,解决了一个简单的跨域问题,总结起来就一句话还是太菜”,下面是一段简单的跨域代码。
package main
import (
"git.com/gin_basic/gin_web/internal/api/handlers"
"github.com/gin-contrib/cors"
"github.com/gin-gonic/gin"
"time"
)
// main函数是程序的入口点
func main() {
// 初始化Gin框架的默认路由器
hdl := handlers.NewUserHandlers()
server := gin.Default()
// 创建UserHandlers实例,用于处理用户相关的请求
//hdl := &handlers.UserHandlers{}
server.Use(cors.New(cors.Config{
AllowCredentials: true,
AllowOrigins: []string{"http://localhost:3000/users/signup"},
AllowHeaders: []string{"content-type", "authorization"},
AllowMethods: []string{"POST"},
AllowOriginFunc: func(origin string) bool {
return true
},
MaxAge: 12 * time.Hour,
}))
// 注册用户相关的路由
//hdl.RegisterRoutes(routers)
hdl.RegisterRoutes(server)
// 启动服务器
server.Run(":8080")
}
结束展示一下:
在代码编辑过程中遇到的一个问题,困扰了我三个小时的问题
server = could not find symbol value for server
这个差了好久,但是没有找到具体的解决方案,后来尝试将 “AllowAllOrigins: true,” 注释掉,然后重新启动解决了。就随缘吧。。。