introduce

This article describes how to quickly configure server CORS through RK-boot.

What is CORS?

Cross-source resource sharing (CORS) (or more popularly known as cross-domain resource sharing) is an HTTP header based mechanism that allows a server to identify other origins (domains, protocols and ports) besides its own, so that browsers can access and load those resources.

Please visit the following address for the full tutorial:

  • rkdocs.netlify.app/cn

The installation

go get github.com/rookie-ninja/rk-boot
go get github.com/rookie-ninja/rk-grpc
Copy the code

Quick start

The gRPC protocol itself is cross-domain (CORS) free because HTTP requests cannot be sent directly to gRPC from the browser.

Rk-boot enables grPC-gateway for the gRPC service by default. The two protocols listen to the same port.

When gRPC enables GRPC-gateway to provide Restful requests, CORS needs to be configured on the server.

1. Create the boot. Yaml

The boot.yaml file tells RK-boot how to start the gRPC service.

In this example, only requests sent from localhost:8080 are allowed to pass validation.

At the same time, we started commonService, which provides default apis such as/RK /v1/ HEALTHY. details

---
grpc:
  - name: greeter                     # Required
    port: 8080                        # Required
    enabled: true                     # Required
    commonService:
      enabled: true                   # Optional, default: false
    interceptors:
      cors:
        enabled: true                 # Optional, default: false
        # Accept all origins from localhost
        allowOrigins:
          - "http://localhost:8080"   # Optional, default: *
Copy the code

2. Create a main. 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/rookie-ninja/rk-boot"
        _ "github.com/rookie-ninja/rk-grpc/boot"
)

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

	// Bootstrap
	boot.Bootstrap(context.Background())

	// Wait for shutdown sig
	boot.WaitForShutdownSig(context.Background())
}
Copy the code

3. Create cors. HTML

Let’s create a simple web page, will call in the localhost: 8080 / fairly rk/v1 / healthy, we by returning the results to verify the CORS.

<! DOCTYPEhtml>
<html>
<body>

<h1>CORS Test</h1>

<p>Call http://localhost:8080/rk/v1/healthy</p>

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

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

</body>
</html>
Copy the code

4. Folder structure

.├ ── Go.tempo ├── go.tempo ├─ main. Go 0 directories, 5 filesCopy the code

5. Verify

When you open cers.html, cers.html will send the request from a non-8080 port, so it will not pass verification.

6. Add a whitelist to the CORS

This time, we’ll configure allowOrigins to localhost:*, so that all requests sent from localhost can pass.

---
grpc:
  - name: greeter                     # Required
    port: 8080                        # Required
    enabled: true                     # Required
    commonService:
      enabled: true                   # Optional, default: false
    interceptors:
      cors:
        enabled: true                 # Optional, default: false
        # Accept all origins from localhost
        allowOrigins:
          - "http://localhost:*"      # Optional, default: *
Copy the code

7. Verify

Complete parameter

See GRPC-CORS to obtain the complete parameter list.