操作場景

在對象存儲的實際應用中，通常需要在瀏覽器網頁中訪問存儲在服務器上的數據。如果瀏覽器禁止跨域請求，則無法直接訪問對象存儲中的數據。

在ZOS中，您可以創建一個存儲桶（bucket）來存儲你的數據對象（Object），這些對象可以通過一個公共的URL進行訪問。然而，如果您想在一個不同域的Web應用中直接訪問這些對象，您可能會遇到跨域問題。例如，網站A要從ZOS存儲桶中獲取一個圖片對象，在沒有配置CORS的情況下，瀏覽器會因為跨域問題而阻止這個請求。然而您可以在存儲桶配置中添加一個CORS策略，指定網站A可以訪問您的對象。這樣，該網站的Web應用就可以通過公共URL直接訪問存儲桶中的對象，而不會遇到跨域問題。

背景知識

瀏覽器同源策略

瀏覽器的同源策略是一種安全機制，用于限制一個網頁文檔或腳本與不同源的資源進行交互。同源策略的目的是保護用戶的隱私和安全，防止惡意網站通過腳本訪問其他網站的敏感信息或進行惡意操作。

根據同源策略，瀏覽器只允許當前網頁與同一源下的其他資源進行交互，包括讀取和修改。這種限制有效地保護了用戶的隱私和安全，阻止惡意網站通過跨域請求獲取用戶的敏感信息。同時，同源策略也有助于防止跨站點腳本攻擊（XSS）和跨站請求偽造攻擊（CSRF）等網絡安全問題。

網址同源是指兩個URL具有相同的來源。具體來說，如果一個URL的協議、域名和端口號都與另一個URL相同，那么這兩個URL就是同源的。下面將舉例為您解釋網址同源的概念：

• //www.daliqc.cn 與 //www.daliqc.cn 協議不同，為不同源；
• //www.daliqc.cn 與//www.ctyun.com域名不同，為不同源；
• //www.daliqc.cn:80 與 //www.daliqc.cn:81 端口號不同，為不同源；
• //www.daliqc.cn/page.html 與 //www.daliqc.cn/other.html 為同源。

跨域資源共享

跨域資源共享CORS（Cross-Origin Resource Sharing）是一種機制，允許一個域上的網頁從不同源上獲取資源。CORS通過在服務器上設置HTTP頭信息，告訴瀏覽器允許或拒絕來自不同源的請求。這個機制允許Web應用從不同的源請求和獲取數據。

CORS類型

瀏覽器將CORS請求分為兩種類型：簡單請求（simple request）和非簡單請求（not-so-simple request）。

• 簡單請求是指同時滿足以下兩個條件的請求：
  • 請求方法是以下三種方法之一：HEAD、GET、POST。
  • HTTP的頭信息不超出以下幾種字段：Accept、Accept-Language、Content-Language、Content-Type、DPR、Downlink、Save-Data、Viewport-Width、Width。其中，Content-Type的值只能是以下三種類型之一：text/plain、multipart/form-data、application/x-www-form-urlencoded。
• 非簡單請求是指不滿足以上兩個條件的請求。當瀏覽器檢測到一次請求是復雜情況時，會首先使用OPTIONS方法發起一個預檢請求（preflight request）到服務器，以獲知服務器是否允許本次請求。服務器根據預先設定的CORS策略進行判斷，如果允許，就會在響應中添加相應的頭信息，告訴瀏覽器允許跨域請求。然后，瀏覽器就會發出實際的請求。

方案優勢

通過配置瀏覽器跨域訪問具有以下優勢：

• 增強互操作性：跨域訪問的配置可以使不同的系統、應用程序和平臺之間更容易地進行數據交互。這將提高互操作性，使得數據可以在各種不同的環境中自由流動。
• 提高可訪問性：允許跨域訪問可以使來自不同域的對象存儲桶對設置允許訪問的瀏覽器和客戶端可見。這將提高應用程序的可訪問性，使得更多的用戶可以訪問和使用這些資源。
• 簡化開發流程：解決跨域問題可以簡化開發流程，減少開發人員需要處理的問題。這將提高開發效率，加速應用程序的開發和部署。
• 提高安全性：配置跨域策略可以限制未經授權的訪問，減少數據泄露的風險。這將提高應用程序的安全性，保護用戶數據不被非法獲取或濫用。
• 優化性能：通過允許跨域訪問，瀏覽器可以直接從對象存儲桶中獲取資源，而不需要進行額外的網絡請求。這將優化應用程序的性能，提高響應速度和用戶體驗。

操作步驟

借助CORS支持，您可以使用ZOS構建各種客戶端Web應用程序，并選擇性地允許跨域訪問您的ZOS資源。要將您的桶配置為允許跨域請求，您可以將CORS規則配置添加到桶中。本節將向您介紹如何使用ZOS控制臺和ZOS軟件開發工具包的方式來啟用CORS。

使用ZOS控制臺

前提：用戶注冊天翼云賬號并開通對象存儲服務。

注意：在桶上啟用CORS，訪問控制列表（ACL）和其他訪問權限策略仍適用。

1.使用以下網址打開ZOS 控制臺：

2.選擇您要配置CORS的桶，點擊Bucket名稱進入“概覽”頁面；

3.點擊“權限管理”->“跨域設置”->“設置”進入策略配置界面；

4.單擊“創建策略”后點擊“確定”按鈕保存規則。

您可以配置CORS的以下各項參數：

使用ZOS軟件開發工具包

下面展示JAVA SDK的使用案例：

使用SDK需要您在您的機器上配置好java以及Maven等環境，具體操作請參考JAVA SDK文檔

您可以使用setBucketCrossOriginConfiguration設置跨域規則，并分別通過 getBucketCrossOriginConfiguration 、deleteBucketCrossOriginConfiguration方法獲取或刪除您桶上的跨域訪問規則。

import com.amazonaws.ClientConfiguration;
import com.amazonaws.auth.AWSCredentials;
import com.amazonaws.auth.AWSStaticCredentialsProvider;
import com.amazonaws.auth.BasicAWSCredentials;
import com.amazonaws.client.builder.AwsClientBuilder;
import com.amazonaws.services.s3.AmazonS3;
import com.amazonaws.services.s3.AmazonS3ClientBuilder;
import com.amazonaws.Protocol;
import com.amazonaws.services.s3.model.*;

import java.util.ArrayList;
import java.util.List;

public class CORS {
    public static String ACCESS_KEY = "AK";//此處請改成您的AK
    public static String SECRET_KEY = "SK";//此處請改成您的SK
    public static String END_POINT = "End_Point";//此處請改成您桶對應的EndPoint
    public static String BUCKET_NAME = "bucket-ff177";
       public static void main(String[] string){
        AmazonS3 s3Client = null;
        try {
            // 當使用HTTPS協議且采用自簽名認證時，需關閉證書檢查
            // System.setProperty("com.amazonaws.sdk.disableCertChecking", "true");
            // 使用憑據和配置建立連接
            AWSCredentials credentials = new BasicAWSCredentials(ACCESS_KEY, SECRET_KEY);
            ClientConfiguration awsClientConfig = new ClientConfiguration();
            // 使用V2簽名時，采用"S3SignerType"
            awsClientConfig.setSignerOverride("S3SignerType");
            // 使用V4簽名時，采用"AWSS3V4SignerType"
            //awsClientConfig.setSignerOverride("AWSS3V4SignerType");
            // 連接默認使用HTTPS協議，使用HTTP協議連接時需要顯式指定
            awsClientConfig.setProtocol(Protocol.HTTP);

            s3Client = AmazonS3ClientBuilder.standard()
                    .withCredentials(new AWSStaticCredentialsProvider(credentials))
                    .withClientConfiguration(awsClientConfig)
                    .withEndpointConfiguration(new AwsClientBuilder.EndpointConfiguration(END_POINT, ""))
                    .disableChunkedEncoding()
                    .build();
            System.out.print("=====connect success=====\n");
        }catch (Exception e) {
            System.out.print("=====request fail=====\n");
            System.out.print(e.getMessage());
        }
         // setBucketCrossOriginConfiguration
        CORSRule rule = new CORSRule();
        rule.setId("test1");
        rule.setAllowedMethods(CORSRule.AllowedMethods.GET,CORSRule.AllowedMethods.PUT);
        List orgs = new ArrayList();
        orgs.add("*");
        rule.setAllowedOrigins(orgs);
        BucketCrossOriginConfiguration config = new BucketCrossOriginConfiguration();
        List<CORSRule> lr = new ArrayList<CORSRule>();
        lr.add(rule);
        config.setRules(lr);
        SetBucketCrossOriginConfigurationRequest req =
                new SetBucketCrossOriginConfigurationRequest(BUCKET_NAME,config);
        s3Client.setBucketCrossOriginConfiguration(req);

        // getBucketCrossOriginConfiguration
        GetBucketCrossOriginConfigurationRequest req1 =
                new GetBucketCrossOriginConfigurationRequest(BUCKET_NAME);
        BucketCrossOriginConfiguration config1 = s3Client.getBucketCrossOriginConfiguration(req1);

        // deleteBucketCrossOriginConfiguration
        DeleteBucketCrossOriginConfigurationRequest req2 =
                new DeleteBucketCrossOriginConfigurationRequest(BUCKET_NAME);
                        s3Client.deleteBucketCrossOriginConfiguration(req2);

    }
}

實踐案例

下面我們將以GET請求為例展示配置CORS前后跨域訪問ZOS桶內資源的情況。

前提條件

• 登錄ZOS控制臺創建桶-bucket-ff177，并設置其ACL權限為“公有讀”。上傳一個名為"hello.txt"的文件，文件內容為“Hello World!";
• 點擊文件后獲取該圖片的訪問鏈接：
• 禁用瀏覽器緩存：以Chrome為例， 按F12打開調試者工具，在調試者工具的右上角打開菜單選項，選擇更多工具（More tools）->網絡限制 （Network conditions），在界面中勾選“停用緩存”選項，即可禁用瀏覽器緩存。

• Fetch API：Fetch API 是一個現代的網絡請求API，可以用于替代瀏覽器中的XMLHttpRequest。Fetch API 支持CORS（跨源資源共享），因此可以用于發送跨域請求。

實踐步驟

1.在終端輸入curl //beijing-5.zos.daliqc.cn/bucket-ff177/hello.txt返回結果正常，說明訪問情況正常；

2.采用靜態html頁面利用Fetch API模擬跨域訪問該Object，在桌面創建一個名為test的文件，后綴為html，文件內容如下：

<!DOCTYPE html>
<html>
<head>
    <title>Send Get Request</title>
    <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; font-family: Arial, sans-serif; } button { margin: 20px; padding: 10px 20px; font-size: 1.2rem; border: none; border-radius: 5px; background-color: #008CBA; color: white; cursor: pointer; } button:hover { background-color: #007B9E; } </style>
</head>
<body>
<button onclick="sendGetCorsRequest()">Send Get Request</button>
<script type="text/javascript">
    var url = "//beijing-5.zos.daliqc.cn/bucket-ff177/hello.txt";
    function sendGetCorsRequest() {
        fetch(url, {
            method: "GET",
            headers:{"Content-Type": "application/json",}
        }).then(function(res) {
            if (res.ok) {
                alert("The response is ok, get request success!");
            } else {
                alert("The response wasn't ok, got status ", res.status);
            }
        }, function(e) {
            alert("Get request failed!", e);
        }).finally(() => {
            location.reload();
        });
    }
</script>
</body>
</html>

3.采用Chrome瀏覽器打開test.html文件并點擊“Send Get Request”按鈕，訪問失敗。

這個錯誤信息表示，請求的資源由于缺少 “Access-Control-Allow-Origin”頭部而被CORS（跨源資源共享）策略阻止。這通常發生在嘗試從不同的域獲取資源時，瀏覽器會檢查請求是否符合CORS策略。

4.在控制臺配置下方的跨域資源共享規則，接受如下請求來源以及請求方法，具體規則如下：

5.重新使用瀏覽器打開test.html文件，訪問成功。