How Do I Interact with OBS Without Exposing My AK and SK?

// Use the Node.js SDK at the backend.
// Import the OBS library.
const ObsClient = require('esdk-obs-nodejs');
// Perform initialization.
const obsClient = new ObsClient({
    // Hard-coded or plaintext AK/SK are risky. For security purposes, encrypt your AK/SK and store them in the configuration file or environment variables. In this example, the AK/SK are stored in environment variables for identity authentication. Before running this example, configure environment variables AccessKeyID and SecretAccessKey.
    // The front-end code does not have the process environment variable, so you need to use a module bundler like webpack to define the process variable.
    // Obtain an AK/SK pair on the management console. For details, see https://support.huaweicloud.com/intl/en-us/usermanual-ca/ca_01_0003.html.
    access_key_id: process.env.AccessKeyID,
    secret_access_key: process.env.SecretAccessKey,
    // Replace the example endpoint with the actual one in your case.
    server: 'https://obs.ap-southeast-1.myhuaweicloud.com'
});
// The frontend transfers the following three parameters to the backend for calculating the signature:
// Bucket name
const bucketName = 'bucketName';
// Object name
const objectKey = 'object';
// HTTP request method
const method = 'PUT'
// Add the Content-Type header and specify the file type. text/plain is an example.
const headers = {
    'Content-Type' : 'text/plain'
}
// The backend calculates the signed URL and returns it to the frontend.
const res = obsClient.createSignedUrlSync({ Method : method, Bucket : bucketName, Key: objectKey, Expires: 3600, Headers : headers });

// The frontend sends an HTTP request to OBS.
// The frontend uses the Axios library.
const url = res.SignedUrl;
const file = document.getElementById('input[type=file]')[0].file
if (!file) {
   console.log('your file is undefined')
}

axios.put(url, file)
  .then(res => console.log(res))
  .catch(err => console.error(err));

When using this solution, you may encounter cross-origin problems. Go through the following list in order, to locate the problem:

1. If no CORS rules are configured, configure one on OBS Console. For details, see Configuring CORS.
2. Check whether the signature parameters are correct by referring to Authentication of Signature in a URL. In the demo here, for example, the PUT method of Axios automatically adds a request header. If this header is not passed in the backend for generating a temporary URL, a cross-origin error occurs, and status code 403 is displayed on the Network tab of the browser, as shown below.