Troubleshooting and Fixing Alibaba Cloud OSS Cross-Origin (CORS) Issues

目录

When developing web-based applications, we often run into the problem of front-end JavaScript being unable to read resources stored on Alibaba Cloud OSS (Object Storage Service). This article documents a typical CORS (Cross-Origin Resource Sharing) troubleshooting process and its solution in detail.

Problem Description

Scenario:
We wrote a Node.js script to scrape data and upload it to Alibaba Cloud OSS. Then, on the front-end pages of the Hexo blog, we used JavaScript (fetch or XMLHttpRequest) to request that JSON data file in order to render charts or lists.

Symptoms:

1. Direct access works: pasting the file’s OSS URL into the browser address bar downloads or previews the file fine, with an HTTP 200 status.
2. Code requests fail: when the page’s code tries to read the file, the browser console reports an error, usually “Network Error” or “Failed to fetch”.
3. In DevTools: in the Network panel, the request status may show as (failed) or CORS error, and Response Data can’t be viewed.

Analysis

This is a classic Cross-Origin Resource Sharing (CORS) problem.

What is cross-origin?

The browser’s Same-Origin Policy is a security mechanism that restricts how a document or script loaded from one origin (protocol + domain + port) interacts with resources from another origin.

When your blog (for example https://wenjun.me) tries to request a resource on Alibaba Cloud OSS (for example https://bucket-name.oss-cn-shanghai.aliyuncs.com/data.json), the browser makes a cross-origin request because the domains differ.

Why does direct access work?

When you type the URL directly into the address bar, that’s a “navigation” action and is not subject to the Same-Origin Policy. But when you use fetch or axios in JS code, the browser strictly checks the response headers the server returns.

How to verify

We can use the curl command to simulate the request and inspect the response headers:

curl -I -H "Origin: https://wenjun.me" https://your-bucket.oss-region.aliyuncs.com/your-file.json

If the Access-Control-Allow-Origin field is missing from the response headers, the browser blocks the response data for that request and throws a cross-origin error.

Solution

To fix this, we need to configure the server side (Alibaba Cloud OSS) to allow cross-origin access.

Step 1: Sign in to the Alibaba Cloud OSS console

1. Sign in to the Alibaba Cloud OSS Management Console.
2. In the left navigation bar, find and click your Bucket name (for example file201503).

Step 2: Configure cross-origin rules

1. Go to Data Security -> Cross-Origin Settings (CORS).

2. Click Create Rule.

3. Fill it in as follows:

   • Allowed Origins:

     • It’s best to enter your site’s domain, for example https://wenjun.me.
     • For testing you can use * (allows all domains), but in production it’s best to restrict the domain.

   • Allowed Methods:

     • Check GET (if you only read files).
     • If you need uploads, you may also need PUT, POST, etc.

   • Allowed Headers:

     • Use * (allow all request headers).

   • Expose Headers:

     • Enter ETag.
     • This lets front-end JS access the ETag response header, which is sometimes needed for cache validation.

4. Click OK to save.

The configuration usually takes effect within seconds. Once done, refresh your page and the data should load normally.

Advanced Optimization: Setting the Right File Metadata

Besides fixing CORS, to give files a better experience in the browser, it’s best to set the correct file headers on upload:

1. Content-Type: set to application/json (for JSON files). This tells the browser it’s a data file, not plain text.
2. Content-Disposition: set to inline.
   • inline: the browser tries to preview the content directly in the window.
   • attachment: the browser forces a download dialog.

Example code in Node.js (the ali-oss SDK):

const headers = {
    // Specify the storage class
    'x-oss-storage-class': 'Standard',
    // Set access to public-read
    'x-oss-object-acl': 'public-read',
    // Set inline so the browser previews directly instead of forcing a download
    'Content-Disposition': `inline; filename="${fileName}"`,
    // Explicitly set the content type to avoid browser misinterpretation
    'Content-Type': 'application/json',
    // Allow overwrite
    'x-oss-forbid-overwrite': 'false',
};

await client.put(fileName, filePath, { headers });

With the above configuration, you can cleanly solve the cross-origin problem of the front end reading data from Alibaba Cloud OSS and improve the user experience.

中英对照

文章作者：阿文

文章链接： https://www.awen.me/post/7dd69bef.html

版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 阿文的博客！