问题解决:跨域访问错误

今天做前端页面渲染的时候遇到一个问题,

因为我使用的wsl开发,windows直接访问不了wsl中的文件,还要改其他配置没成功,索性就不改了,粘贴在桌面上用浏览器打开调试

然后所有使用apifox通过测试的路径全部报错

Ensure CORS response header values are valid
A cross-origin resource sharing (CORS) request was blocked because of invalid or missing response headers of the request or the associated preflight request .
To fix this issue, ensure the response to the CORS request and/or the associated preflight request are not missing headers and use valid header values.
Note that if an opaque response is sufficient, the request's mode can be set to no-cors to fetch the resource with CORS disabled; that way CORS headers are not required but the response content is inaccessible (opaque

这个错误主要是因为跨域访问导致的

什么是跨域访问

跨域访问报错的原理是浏览器的同源策略（Same-Origin Policy）。同源策略是一种安全策略，指浏览器允许在同一域名下的页面间相互访问，但禁止跨域名访问。

跨域访问的问题通常出现在客户端的 JavaScript 代码中，当 JavaScript 代码向另一个域名的服务器发起请求时，如果该域名与当前域名不同，则会触发跨域访问错误。因为浏览器出于安全考虑，不允许通过 XMLHttpRequest 或 Fetch API 发送跨域请求，除非响应中包含正确的跨域头信息（CORS）。

在服务器上的 HTML 文件也可能遇到跨域问题。比如，如果 HTML 文件中包含了从不同域名加载的资源，比如图片、CSS 或 JavaScript 文件，如果服务器未正确设置跨域头信息，那么这些资源的请求也可能会被浏览器拦截。

通常情况下，在服务器端设置正确的跨域头信息（CORS）可以解决跨域问题。同时，也可以使用 JSONP、代理、WebSocket 等技术绕过浏览器的同源策略。

简单来说就是我在我的桌面的html文件中有访问wsl的域名,然后两个域名不一样,就会触发保护机制,如果这时你的服务端没有添加跨域的许可(对我来说就是添加桌面的html可以访问路径的许可),就会找不到路径返回404

问题解决,

1. 第一就是不要跨域,两个域名相同(localhost或者127.0.0.1什么的),安全一点

2. 第二个方法就是,添加许可,对头部信息进行设置(请求与相应都要进行设置,不然要么请求不了,要么收不到相应)

• 请求:

我们可以使用一个中间件函数来处理跨域的验证,因为如果跨域,浏览器要先发送一个请求方法为: OPTIONS的请求来判断,需要返回一个200才会发送剩下的请求,使用我们定义跨域访问许可中间件函数

// 允许跨域访问中间件
func Dfot() gee7.HandlerFunc {
 return func(ctx *gee7.Context) {
  // 处理预检请求
  if ctx.Req.Method == "OPTIONS" {
   // 验证预检请求的来源、头部字段和请求方法是否符合预期
   // ...

   // 设置响应头部字段
   ctx.Writer.Header().Set("Access-Control-Allow-Origin", "*")
   ctx.Writer.Header().Set("Access-Control-Allow-Methods", "POST, GET, OPTIONS")
   ctx.Writer.Header().Set("Access-Control-Allow-Headers", "Content-Type")

   // 返回状态码 200 和空响应体
   ctx.Writer.WriteHeader(http.StatusOK)
   return
  }
 }
}

我这里ctx.Writer.Header().Set("Access-Control-Allow-Origin"使用的"*"表示所有跨域路径都可以访问,为了安全起见生产环境不建议这样用

• 相应:

在相应的时候在setheader函数中添加允许跨域访问的路径(我这里嫌麻烦还是用的*)

func (c *Context) SetHeader(key string, value string) {
 c.Writer.Header().Set("Access-Control-Allow-Origin", "*")
 c.Writer.Header().Set(key, value)
}

这样就解决跨域访问的的错误了

本文由 mdnice 多平台发布