全国公路建设信用网站,上海专业高端网站建设服务器,企业信息,开发棋牌游戏软件需要多少钱今天做前端页面渲染的时候遇到一个问题, 因为我使用的wsl开发,windows直接访问不了wsl中的文件,还要改其他配置没成功,索性就不改了,粘贴在桌面上用浏览器打开调试 然后所有使用apifox通过测试的路径全部报错 Ensure CORS response header values are validA cross-origin reso… 今天做前端页面渲染的时候遇到一个问题, 因为我使用的wsl开发,windows直接访问不了wsl中的文件,还要改其他配置没成功,索性就不改了,粘贴在桌面上用浏览器打开调试 然后所有使用apifox通过测试的路径全部报错 Ensure CORS response header values are validA 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 requests 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 问题解决, 第一就是不要跨域,两个域名相同(localhost或者127.0.0.1什么的),安全一点 第二个方法就是,添加许可,对头部信息进行设置(请求与相应都要进行设置,不然要么请求不了,要么收不到相应) 请求: 我们可以使用一个中间件函数来处理跨域的验证,因为如果跨域,浏览器要先发送一个请求方法为: 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 多平台发布
