Alibaba Cloud OSS Blocked By CORS Policy Using NextJS

Question

I used NextJS to upload image file to alibaba oss from origin http://localhost:3000 to bucket in Alibaba Cloud. I was already set CORS, but it still not work. How can I do that? enter image description here

here is the result enter image description here

here is my code

import co from 'co'
import OSS from 'ali-oss'

const client = new OSS({
    region: 'oss-ap-southeast-3',
    accessKeyId: '<accesskeyid>',
    accessKeySecret: '<accesskeysecret>',
    bucket: '<my bucket name>'
});

const onSubmit = () => {
        co(function* () {
            var result = yield client.put('image', images);
            console.log(result);
        }).catch(function (err) {
            console.log(err);
        });
 }

Answer 1

By default the CORS is disabled. To use CORS with put bucket use

The origin from which the cross-origin request is sent matches the value of one AllowedOrigin element in the CORS rule.

The method of the cross-origin request such as GET or PUT or the method that corresponds to the Access-Control-Request-Method header in the OPTIONS request matches the value of one AllowedMethod element in the CORS rule.

Each header that is included in Access-Control-Request-Headers in the OPTIONS request matches the value of one AllowedHeader element in the CORS rule.

more on CORS for put method : https://www.alibabacloud.com/help/doc-detail/32001.htm