首页 > 解决方案 > 将文件上传到 DigitalOcean Spaces,得到“从源 (url) 访问 (url) 处的 XMLHttpRequest 已被 CORS 策略阻止”

问题描述

控制台中的完整错误是

从源“ http://localhost:3000 ”对 XMLHttpRequest 的访问已被 CORS 策略阻止:对预检请求的响应未通过访问控制检查:不存在“Access-Control-Allow-Origin”标头在请求的资源上。

我尝试将 CORS 配置设置为允许在所有域上进行 PUT 和 POST,但仍然出现错误。

客户端的代码如下所示 -

// digitalOcean.js
import AWS from 'aws-sdk'

const regionName = 'nyc3'
const accessKeyId = 'KEYID'
const accessSecretKey = 'SECRETKEY'
export const bucketName = 'BUCKETNAME'

const endpointUrl = `${regionName}.digitaloceanspaces.com`
export const bucketUrl = `https://${bucketName}.${endpointUrl}/`

const spacesEndpoint = new AWS.Endpoint(endpointUrl)
export const s3 = new AWS.S3({
  endpoint: spacesEndpoint,
  accessKeyId: accessKeyId,
  secretAccessKey: accessSecretKey,
})

// getItem.jsx
import * as digitalOcean from '../services/digitalOcean'

function uploadFile(file) {
  const params = { Body: file, Bucket: digitalOcean.bucketName, Key: file.name }
  digitalOcean.s3.putObject(params)
    .on('build', request => {
      request.httpRequest.headers.Host = digitalOcean.bucketUrl
      request.httpRequest.headers['Content-Length'] = file.size
      request.httpRequest.headers['Content-Type'] = file.type
      request.httpRequest.headers['x-amz-acl'] = 'public-read'
    })
    .send((err, data) => {
      if (err) return alert(JSON.stringify(err))
      // ...
    })
}

知道问题可能是什么吗?

标签: javascriptcorsdigital-ocean

解决方案


我最终通过将 Allowed Headers 设置为 * 来让它工作,就像这样 -

截图1 截图2


推荐阅读