[英]Google cloud troubleshot with signed url in navigator and react
I'm trying to upload a file on google cloud storage bucket with an url signed.我正在尝试在带有 url 签名的谷歌云存储桶上上传文件。 I generate this url signed on a java server-side api (lagom and scala, but use the java library of google) like this:我生成这个 url 在 java 服务器端 api 上签名(lagom 和 scala,但使用谷歌的 java 库),如下所示:
def generateV4GPutObjectSignedUrl(objectId: String, bucketTempName : String): String = {
// Define Resource
val blobInfo = BlobInfo.newBuilder(BlobId.of(bucketTempName, objectId)).build
// Generate Signed URL
val extensionHeaders : HashMap[String, String] = new HashMap();
extensionHeaders.put("content-type", "application/x-www-form-urlencoded");
val url = storage.signUrl(blobInfo, timeSignedUrl, TimeUnit.SECONDS, Storage.SignUrlOption.httpMethod(HttpMethod.PUT),
Storage.SignUrlOption.withExtHeaders(extensionHeaders), Storage.SignUrlOption.withV4Signature())
url.toString
}
On my client-side reactjs, I try to use this url with Axios: ''' const file = this.state.file;在我的客户端 reactjs 上,我尝试将此 url 与 Axios 一起使用: ''' const file = this.state.file; const url = new URL(this.state.urlToUpload); const url = 新 URL(this.state.urlToUpload);
const options = {
params : url.search,
headers : {
"Content-Type" : file.type,
/*"X-File-Name" : this.state.tenantId + "-" + this.state.id,*/
/*"Content-Length" : file.size,*/
//"access-control-allow-origin" : "*"
},
}
console.log(options);
let callback = function (response) {
console.log(response);
// handle success
this.setState({
isUpload : true
});// upload sur google qd l'état modifier
console.log("upload finished");
};
callback = callback.bind(this);
console.log("upload begin");
axios.put(url.href, file, options).then(callback)
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});
''' I've setup my bucket CORS like this: ''' 我已经像这样设置了我的存储桶 CORS:
[
{
"origin": ["http://localhost:3000"],
"responseHeader": ["Content-Type", "X-File-Name", "Content-Length", "access-control-allow-origin", "Authorization", "User-Agent", "x-goog-resumable", "Accept-Encoding", "Accept-Language", "Connection", "Host", "Origin", "Referer", "TE", "Accept"],
"method": ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
"maxAgeSeconds": 1800
}
]
I've tested different content-type (always same client-side and server-side).我测试了不同的内容类型(总是相同的客户端和服务器端)。 For all this test, the Option preflight http request is ok like that:对于所有这些测试,Option preflight http 请求是这样的:
HTTP/2 200 OK
x-guploader-uploadid: AAANsUkl4OZVmEX_cBGT2Wd363YoJd6mcG_59hY7TgPH4lupm38VXEHXRYkYVt6nzOb7synkbkRExV45KlJfqBzMiNZwYTQt0w
access-control-allow-origin: http://localhost:3000
access-control-max-age: 1800
access-control-allow-methods: GET,POST,PUT,DELETE,OPTIONS
access-control-allow-headers: Content-Type,X-File-Name,Content-Length,access-control-allow-origin,Authorization,User-Agent,x-goog-resumable,Accept-Encoding,Accept-Language,Connection,Host,Origin,Referer,TE,Accept
vary: Origin
date: Wed, 08 Jul 2020 13:03:52 GMT
expires: Wed, 08 Jul 2020 13:03:52 GMT
cache-control: private, max-age=0
content-length: 0
server: UploadServer
content-type: text/html; charset=UTF-8
alt-svc: h3-29=":443"; ma=2592000,h3-27=":443"; ma=2592000,h3-25=":443"; ma=2592000,h3-T050=":443"; ma=2592000,h3-Q050=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"
X-Firefox-Spdy: h2
but the put request failed with a 403 error code and CORS missing Allow Origin:但放置请求失败,出现 403 错误代码和 CORS 缺少允许来源:
HTTP/2 403 Forbidden
x-guploader-uploadid: AAANsUmuMK8iiw99CGz7ldrcHZR_GkBttiMEBo_tBeR5-GpchMWT8InuNVGa2TfAdiCsDGuQUXF93PH1F98K7PG-rQDYQcLtUQ
content-type: application/xml; charset=UTF-8
content-length: 1697
date: Wed, 08 Jul 2020 13:04:02 GMT
server: UploadServer
alt-svc: h3-29=":443"; ma=2592000,h3-27=":443"; ma=2592000,h3-25=":443"; ma=2592000,h3-T050=":443"; ma=2592000,h3-Q050=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"
X-Firefox-Spdy: h2
I've try the same request with the same header on Postman, I don't have any error and the file is upload correctly.我在 Postman 上用相同的 header 尝试了相同的请求,我没有任何错误,文件上传正确。 I've try to disable CORS with extension on navigator, it removes the CORS error, but the error 403 is still here.我尝试禁用导航器上带有扩展名的 CORS,它消除了 CORS 错误,但错误 403 仍然存在。 I think that google don't add "access-control-allow-origin" in the header.我认为谷歌不会在 header 中添加“access-control-allow-origin”。
With XMLHttpRequest and FormData, it resolve the problem.使用 XMLHttpRequest 和 FormData,它解决了问题。
handleIdAndUrlReceived() {
const file = this.state.file;
const url = new URL(this.state.urlToUpload);
var xhr = new XMLHttpRequest();
const formData = new FormData();
for(let e in url.search){
formData.append(e, url.search[e]);
}
formData.append("file", file);
xhr.open("PUT", url.href);
xhr.setRequestHeader('Content-Type', file.type);
xhr.send();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.