Go实现简单CORS与非简单请求的预检请求案例

已于 2024-01-27 22:38:10 修改
阅读量981 收藏 25
点赞数 23
文章标签： go 网络协议
于 2024-01-27 19:40:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YSF__/article/details/135887150
版权

CORS

跨源资源共享（CORS）是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其他源（域、协议或端口），使得浏览器允许这些源访问加载自己的资源。

跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的“预检”请求。在预检中，浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。

构造简单前端

首先创建一个简单的前端页面，页面有一个用于显示消息的文本区域和一个带有两个按钮的简单表单。单击按钮时，它会调用 JavaScript 函数 onGet() ，向其传递版本号。其中 v1 将会因为 CORS 问题失败，v2 将解决这个问题

<html>
    <head>
        <meta charset="UTF-8" />
        <title>Fixing Common Issues with CORS</title>
    </head>
    <body>
        <h1>Fixing Common Issues with CORS</h1>
        <div>
            <textarea id="messages" name="messages" rows="10" cols="50">Messages</textarea><br/>
            <form id="form1">
                <input type="button" value="Get v1" onclick="onGet('v1')"/>
                <input type="button" value="Get v2" onclick="onGet('v2')"/>
            </form>
        </div>
    </body>
</html>

onGet() 函数将版本号插入到 URL 中，然后向 API 服务器发出提取请求。

function onGet(version) {
    const url = "http://localhost:8000/api/" + version + "/messages";
    var headers = {}
    
    fetch(url, {
        method : "GET",
        mode: 'cors',
        headers: headers
    })
    .then((response) => {
        if (!response.ok) {
            throw new Error(response.error)
        }
        return response.json();
    })
    .then(data => {
        document.getElementById('messages').value = data.messages;
    })
    .catch(function(error) {
        document.getElementById('messages').value = error;
    });
}

创建一个 go 文件，启动服务器 go run frontend.go 并输入 http://localhost:8080 查看静态内容。

package main

import (
	"github.com/gin-contrib/static"
	"github.com/gin-gonic/gin"
)

func main() {
	r := gin.Default()
	r.Use(static.Serve("/", static.LocalFile("./frontend", false)))
	r.Run(":8080")
}

构造简单的 REST API

每当向指定的 URL 发出 GET 请求时，都会调用该函数 GetMessages() 。它返回包含消息的 JSON 字符串。该 URL 包含一个路径参数，该参数将为 v1 或 v2 。服务器侦听端口 8000。

package main

import (
	"fmt"
	"strconv"
	"net/http"

	"github.com/gin-gonic/gin"
)

var messages []string

func GetMessages(c *gin.Context) {
	version := c.Param("version")
	fmt.Println("Version", version)
	c.JSON(http.StatusOK, gin.H{"messages": messages})
}

func main() {
	messages = append(messages, "Hello CORS!")
	r := gin.Default()
	r.GET("/api/:version/messages", GetMessages)
	r.Run(":8000")
}

如何解决简单的 CORS 问题

解决方案

现在有两个服务，一个前端服务位于 http://localhost:8080，后端服务位于 http://localhost:8000，尽管他们有相同的主机名，但在 CORS 的角度上，他们监听不同的端口因此处于不同域。如果 JavaScript fetch 请求指定 mode 为 cors，则将添加一个请求标头，用于标识源：

Origin: http://localhost:8080

进入前端页面，点击 Get v1 ，会报错

Access to fetch at ‘http://localhost:8000/api/v1/messages’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

该消息指出，由于 CORS 策略，浏览器已阻止该请求获取响应。它提出了两种解决方案。第二个建议是将 JavaScript 获取请求中的 mode from cors 更改为 no-cors 。这不是一个好的选择，因为浏览器在模式 no-cors 下总是会删除响应数据，以防止未经授权的客户端读取数据。
Request.mode - Web API 接口参考 | MDN (mozilla.org)

该问题的解决方案是让服务器设置一个响应标头，浏览器根据这个标头就知道能不能允许它发出跨域请求。

Access-Control-Allow-Origin: http://localhost:8080

这会告知 Web 浏览器，允许指定域的跨域请求。如果该响应标头中指定的域与 Origin 请求标头中指定的域匹配，则浏览器不会阻止 JavaScript 接收响应。
因此，当 URL 包含 v2 将 GetMessages() 函数更改为即可解决简单的CORS问题。

func GetMessages(c *gin.Context) {
	version := c.Param("version")
	fmt.Println("Version", version)
	if version == "v2" {
		c.Header("Access-Control-Allow-Origin", "http://localhost:8080")
	}
	c.JSON(http.StatusOK, gin.H{"messages": messages})
}

预检请求

尽管简单修复了主要的 CORS 问题，但仍存在一些限制。其中一个限制是只允许使用 HTTP、GET 和 OPTIONS 方法。GET 和 OPTIONS 方法是只读的，并且被认为是安全的，因为它们不会修改现有内容。

POST、PUT 和 DELETE 方法 (非简单请求)可以添加或更改现有内容，这些被认为是不安全的，当用户想修改服务器数据的时候，浏览器会发出一个预检请求 (preflight)，预检请求可以查看服务器是否支持当前跨域请求 (服务端正常会设置允许使用的方法)，因此预检请求没有具体方法而是 OPTION。

新建表单：

<form id="form2">
    <input type="text" id="puttext" name="puttext"/>
    <input type="button" value="Put v1" onclick="onPut('v1')"/>
    <input type="button" value="Put v2" onclick="onPut('v2')"/>
</form>

onPut 会生成一个 PUT 请求，在请求正文中发送表单参数。

function onPut(version) {
    const url = "http://localhost:8000/api/" + version + "/messages/0";
    var headers = {}

    fetch(url, {
        method : "PUT",
        mode: 'cors',
        headers: headers,
        body: new URLSearchParams(new FormData(document.getElementById("form2"))),
    })
    .then((response) => {
        if (!response.ok) {
            throw new Error(response.error)
        }
        return response.json();
    })
    .then(data => {
        document.getElementById('messages').value = data.messages;
    })
    .catch(function(error) {
        document.getElementById('messages').value = error;
    });
}

定义 PUT 处理程序和函数：

r.PUT("/api/:version/messages/:id", PutMessage)

//处理函数
func PutMessage(c *gin.Context) {
	version := c.Param("version")
	id, _ := strconv.Atoi(c.Param("id"))
	text := c.PostForm("puttext")
	messages[id] = text
	if version == "v2" {
	    c.Header("Access-Control-Allow-Origin", "http://localhost:8080")
	}
	c.JSON(http.StatusOK, gin.H{"messages": messages})
}

重新加载页面，点击 Put v1 按钮，会得到一个与之前不同的错误

Access to fetch at ‘http://localhost:8000/api/v1/messages/0’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

错误显示进行了 preflight 检查，并且没有设置 Access-Control-Allow-Origin 标头。

浏览器发现，这是一个非简单请求，就自动发出一个"预检"请求，要求服务器确认可以这样请求。下面是这个"预检"请求的HTTP头信息。
在这里插入图片描述

查看 API 服务器控制台的输出：
[GIN] | 404 | 1.07µs | OPTIONS "/api/v1/messages/0"

与之前的示例不同，在 GET 示例中，浏览器发出了请求但阻止了响应。

而现在浏览器拒绝发出 PUT 请求，它向同一 URI 发送了 OPTIONS 请求。仅当 OPTIONS 请求返回正确的 CORS 标头时，它才会发送 PUT 请求。（由于服务器不知道 OPTIONS 预检请求是针对什么方法的，因此预检请求会在请求标头中指定该方法例如：Access-Control-Request-Method:PUT）
在这里插入图片描述

通过为 OPTIONS 请求添加一个处理程序来解决此问题

func OptionMessage(c *gin.Context) {
	c.Header("Access-Control-Allow-Origin", "http://localhost:8080")
}

func main() {
	messages = append(messages, "Hello CORS!")
	r := gin.Default()
	r.GET("/api/:version/messages", GetMessages)
	r.PUT("/api/:version/messages/:id", PutMessage)
	r.OPTIONS("/api/v2/messages/:id", OptionMessage)   //仅针对 `v2` 进行设置
	r.Run(":8000")
}

如果重启服务器点击 Put v2 会得到另一个错误：

Access to fetch at ‘http://localhost:8000/api/v2/messages/0’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: Method PUT is not allowed by Access-Control-Allow-Methods in preflight response.

预检检查需要 Access-Control-Allow-Method 标头来阻止 PUT 请求被阻止，即需要设置允许使用的方法。

func OptionMessage(c *gin.Context) {
	c.Header("Access-Control-Allow-Origin", "http://localhost:8080")
	c.Header("Access-Control-Allow-Methods", "GET, OPTIONS, POST, PUT") //设置允许使用的方法
}

参考链接：
代码可以参考：解决 CORS 和 JavaScript 的常见问题 |Okta 开发人员 — Fixing Common Problems with CORS and JavaScript | Okta Developer
跨域资源共享 CORS 详解 - 阮一峰的网络日志 (ruanyifeng.com)
(55 封私信 / 80 条消息) Fetch API 的 mode 参数是用来干什么的？ - 知乎 (zhihu.com)
跨源资源共享（CORS） - HTTP | MDN (mozilla.org)
跨域的解决方法有哪些？JSONP的原理？CORS怎么使用？Nginx如何设置？_哔哩哔哩_bilibili

YSF__
关注
Go实现CORS（跨域）
下载完，不懂运行可以私聊，看到会回
10-16 563
如果两个 URL 的协议、端口（如果有指定的话）和主机都相同的话，则这两个 URL 是同源的。例如跨域资源共享（Cross-origin resource sharing，CORS），用于让网页的受限资源能够被其他域名的页面访问的一种机制。通过该机制，页面能够自由地使用不同源的图片、样式、脚本、iframes以及视频。一些跨域的请求（特别是Ajax）常常会被同源策略（Same-origin policy）所禁止。
Golang——通过实例了解并解决CORS跨域问题
脑袋装水的博客
09-20 1816
通过一个基于简单易懂的例子，了解前后端交互时出现的CORS跨域问题，包括跨域问题出现的原因、前后端两种解决方法！！！ 例子技术栈： 后端使用：golang net/http 前端使用：js express http-proxy-middleware
golang 中间件CORS处理跨域请求
weixin_52906070的博客
08-25 1450
跨域请求通常称为 CORS（Cross-Origin Resource Sharing），它是一种机制，用于在浏览器中处理跨域请求。跨域请求指的是在浏览器中，从一个域名的网页向另一个域名的服务器请求资源，例如在前端 JavaScript 代码中使用 XMLHttpRequest 或 Fetch API 请求不同域名的数据。跨域请求可能会涉及到不同域名、不同端口、不同协议之间的请求。由于浏览器的同源策略（Same-Origin Policy），默认情况下，跨域请求是不允许的。
用go实现cors中间件
dayouzi的博客
09-20 783
CORS（Cross-Origin Resource Sharing）是一种浏览器安全机制，用于控制在Web应用程序中不同源（Origin）之间的资源共享。一个源是由协议（例如http或https）、主机（例如 www.example.com)、以及端口（例如80或443）组成的组合。CORS允许服务器定义哪些源可以访问其资源，以及哪些HTTP方法和头部可以在跨源请求中使用。
Go CORS处理程序：跨域资源共享的优雅解决方案
最新发布
gitblog_00030的博客
06-07 272
Go CORS处理程序：跨域资源共享的优雅解决方案 corsGo net/http configurable handler to handle CORS requests项目地址:https://gitcode.com/gh_mirrors/cor/cors 项目简介 在现代Web开发中，跨域资源共享（CORS）是确保应用程序安全、灵活运作的关键部分。Go CORS Handler是一个基于G...
cors跨域之简单请求与预检请求（发送请求头带令牌token）
memory_CC的博客
06-05 8666
引子自从从JAVA伪全栈转前端以来，学习的路上就充满了荆棘（奇葩问题），而涉及前后端分离这个问题，对cors的应用不断增多，暴露出的问题也接踵而至。这两天动手实践基于Token的WEB后台认证机制，看过诸多理论（较好一篇推荐），正所谓虑一千次，不如去做一次。 犹豫一万次，不如实践一次，所以就有了下文，关于token的生成，另外一篇文章会细讲，本篇主要讨论在发送ajax请求，头部带上自定义token...
Java实现CORS跨域请求的实现方法
08-29
Java实现CORS跨域请求的实现方法 本篇文章主要介绍了Java实现CORS跨域请求的实现方法，这是一种常见的解决方案，用于解决前后端分离开发模式下的跨域请求问题。 CORS全名为Cross-Origin Resource Sharing，中文名为...
Java利用cors实现跨域请求实例
08-30
Java利用cors实现跨域请求实例 跨域请求是指浏览器不能执行其他网站的脚本，这是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。这种限制会导致Ajax请求无法跨域访问其他网站的资源。为解决这个...
Django中使用CORS实现跨域请求过程解析
09-18
在Django中，可以通过安装和配置django-cors-headers模块来实现跨域请求。django-cors-headers是一个第三方库，用于添加响应头，以允许跨域请求。其工作原理是在HTTP响应中添加适当的CORS头，如Access-Control-Allow...
使用CORS实现JavaWeb跨域请求问题的方法
09-01
总结，通过在JavaWeb应用中实现和配置CORS Filter，我们可以有效地解决跨域请求的问题，允许不同源的客户端与服务器进行通信。这种方法相比JSONP更安全，因为它允许控制更多的请求头和方法，而且适用于所有现代...
react-解决 fetch 跨域问题：Access to fetch at xxx from origin yyy has been blocked by CORS policy
热门推荐
倚树探星的博客
06-05 3万+
报错 解决 在 package.json 中添加代码 "proxy": "http://tingapi.ting.baidu.com" // 这是你要访问的域 然后重新运行，否则会报如下错误： 请求成功： 关于跨域 常用解决方法： jsonp CORS 代理 proxy 什么是跨域 常用解决方案 开发模式下：react、vue都提供了解决方案 生产模式下：jsonp、cors、iframe、postMessage、…… ...
go-http解决跨域问题
思月行云
02-15 1012
今天中午在部署golang与vue搭建的一个项目时，因为将项目部署到了云端的Docker容器内期间涉及到了一些跨域问题，本以为在后端配置一下跨域即可，没想到最后是因为非简单请求跨域的规范导致出错本文章会介绍跨域的基础概念，解决跨域的方法都有什么，golang如何解决跨域问题，简单与非简单请求的基本概念及规定。
Ajax CORS
落枫秋歌
08-26 688
Ajax是Asynchronous JavaScript and XML的缩写，可以达到无需重载整个页面的情况下进行页面内容的局部更新（不更新页面的同时从服务器获取数据）；其核心是XMLHttpRequest对象（XHR），最早由微软提出，后来被多家浏览器厂商实现；XHR对象IE5是最早引入了XHR对象的浏览器，其通过ActiveX实现了XHR；目前，IE7+、Chrome、FireFox、Safa
Go实现跨域Cors中间件
wxk0123456789的博客
06-03 819
本文主要实现cors中间件。
go语言web开发系列之二十八:用gin-contrib/cors解决cors跨域访问
刘老师的技术森林
02-04 2817
一，安装用到的库 1，cors库地址: https://github.com/gin-contrib/cors 2，从命令行安装: liuhongdi@ku:~$ go get -u github.com/gin-contrib/cors 说明：刘宏缔的go森林是一个专注golang的博客， 地址：https://blog.csdn.net/weixin_43881017 说明：作者:刘宏缔 邮箱: 371125307@qq.com 二，演示项目的相关信息 1,地址: ...
【Go开源宝藏】CORS 跨域 与 CSRF攻击 | 中间件
面向生活编程
10-17 2374
【Go开源宝藏】CORS 跨域
Go中beego解决跨域问题 利用cors，史上最详细
小飞哥的博客
03-08 7836
golang的优势就是做微服务，但是暴露出来的api不在同一个项目中调用会报错？ No 'Access-Control-Allow-Origin' header is present on the requested 包括前端处理了跨域请求jsonp但是还是没用！ 接下来小飞哥带大家解决这个问题 go get "github.com/astaxie/beego/plugins/...
golang实现跨域访问
benben的博客
02-03 1万+
前端通过Ajax来获取服务器资源时，会存在跨域问题。因为Ajax只能同源使用（预防某些恶意行为），所以当访问不在同一个域中的资源时，就会出现跨域限制。尤其在开发和测试时，跨域问题会给前端测试带来非常不便。 不过CORS（Cross-Origin Resource Sharing，跨域资源共享）解决了这个问题，它背后的基本思想是：使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值