GoFrame 框架(rk-boot): 快速配置服务端 CORS

2022-02-03 16:55:12 浏览数 (1)

介绍

本文介绍如何通过 rk-boot 快速配置服务端 CORS。

什么是 CORS? 跨源资源共享 (CORS) (或通俗地译为跨域资源共享)是一种基于HTTP 头的机制,该机制通过允许服务器标示除了它自己以外的其它origin(域,协议和端口),这样浏览器可以访问加载这些资源。

请访问如下地址获取完整教程:

  • https://rkdocs.netlify.app/cn

安装

代码语言:go复制
go get github.com/rookie-ninja/rk-boot/gf

快速开始

1.创建 boot.yaml

boot.yaml 文件会告诉 rk-boot 如何启动 gogf/gf 服务。

在这个例子中,我们只允许 localhost:8080 发送过来的请求,通过验证。

代码语言:yaml复制
---
gf:
  - name: greeter                     # Required
    port: 8080                        # Required
    enabled: true                     # Required
    interceptors:
      cors:
        enabled: true                 # Optional, default: false
        allowOrigins:
          - "http://localhost:8080"   # Optional, default: *

2.创建 main.go

代码语言:go复制
// Copyright (c) 2021 rookie-ninja
//
// Use of this source code is governed by an Apache-style
// license that can be found in the LICENSE file.
package main

import (
	"context"
	"github.com/gogf/gf/v2/net/ghttp"
	"github.com/rookie-ninja/rk-boot"
	"github.com/rookie-ninja/rk-boot/gf"
	"net/http"
)

func main() {
	// Create a new boot instance.
	boot := rkboot.NewBoot()

	// Register handler
	entry := rkbootgf.GetGfEntry("greeter")
	entry.Server.BindHandler("/v1/hello", hello)

	// Bootstrap
	boot.Bootstrap(context.TODO())

	boot.WaitForShutdownSig(context.TODO())
}

func hello(ctx *ghttp.Request) {
	ctx.Response.WriteHeader(http.StatusOK)
	ctx.Response.WriteJson(map[string]string{
		"message": "hello!",
	})
}

3.创建 cors.html

让我们创建一个简单网页,网页里会调用 localhost:8080/v1/hello,我们通过返回结果来验证 CORS。

代码语言:html复制
<!DOCTYPE html>
<html>
<body>

<h1>CORS Test</h1>

<p>Call http://localhost:8080/v1/hello</p>

<script type="text/javascript">
    window.onload = function() {
        var apiUrl = 'http://localhost:8080/v1/hello';
        fetch(apiUrl).then(response => response.json()).then(data => {
            document.getElementById("res").innerHTML = data["message"]
        }).catch(err => {
            document.getElementById("res").innerHTML = err
        });
    };
</script>

<h4>Response: </h4>
<p id="res"></p>

</body>
</html>

4.文件夹结构

代码语言:txt复制
.
├── boot.yaml
├── cors.html
├── go.mod
├── go.sum
└── main.go

0 directories, 5 files

5.验证

打开 cors.html,cors.html 会从非 8080 端口发送请求,所以无法通过验证。

6.给 CORS 添加白名单

这次,我们把 allowOrigins 配置成 localhost:*,即,让所有从 localhost 发送的请求,均可以通过。

代码语言:yaml复制
---
gf:
  - name: greeter                     # Required
    port: 8080                        # Required
    enabled: true                     # Required
    interceptors:
      cors:
        enabled: true                 # Optional, default: false
        allowOrigins:
          - "http://localhost:*"      # Optional, default: *

7.验证

打开 cors.html

完整参数

请参考 gf-cors 获取完整参数列表。

名字

描述

类型

默认值

gf.interceptors.cors.enabled

启动 CORS 拦截器

boolean

false

gf.interceptors.cors.allowOrigins

可通过验证的 Origin 地址。

[]string

*

gf.interceptors.cors.allowMethods

可通过的 http method, 会包含在 OPTIONS 请求的 Header 中。

[]string

All http methods

gf.interceptors.cors.allowHeaders

可通过的 http header, 会包含在 OPTIONS 请求的 Header 中。

[]string

Headers from request

gf.interceptors.cors.allowCredentials

会包含在 OPTIONS 请求的 Header 中。

bool

false

gf.interceptors.cors.exposeHeaders

会包含在 OPTIONS 请求的 Header 中的 Header。

[]string

""

gf.interceptors.cors.maxAge

会包含在 OPTIONS 请求的 Header 中的 MaxAge。

int

0

0 人点赞