I’m having some trouble. I read a book that said all the headers need to match what is being expected by GCS. I’m not sure what all of those are. I thought I could decipher that with the form data and the page, but they put the same name on every form input: the bucket url.
The erorr I need to fix is Access-Control-Allow-Origin:
has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
So I have this php at the top of my page
// Allow from any origin
if (isset($_SERVER['HTTP_ORIGIN'])) {
// Decide if the origin in $_SERVER['HTTP_ORIGIN'] is one
// you want to allow, and if so:
// BUG: may not have all headers set for the form
//header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
header("Access-Control-Allow-Origin: http://localhost:5173");
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Max-Age: 3600'); // cache for 1 day
}
// Access-Control headers are received during OPTIONS requests
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
// may also be using PUT, PATCH, HEAD etc
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
exit(0);
}
and this form code
use Google\Cloud\Storage\StorageClient;
putenv("GOOGLE_APPLICATION_CREDENTIALS=" . __DIR__ . '../../../Yen7AaH9rb/[KEY FILE]');
$storage = new StorageClient();
$bucket = $storage->bucket('[BUCKET NAME]');
$objectName = 'profile_image.jpg';
$response = $bucket->generateSignedPostPolicyV4(
$objectName,
new \DateTime('10 min'),
[
'fields' => [
'Content-Disposition' => 'attachment; filename=FILENAME'
]
]
);
$url = $response['url'];
$output = "<form id=\"profileImageUpload\" action='$url' method='POST' enctype='multipart/form-data'>" . PHP_EOL;
foreach ($response['fields'] as $name => $value) {
$output .= " <input name='$url' value='$value' type='hidden'/>" . PHP_EOL;
}
$output .= " <input type='file' name='profileImageFile'/><br />" . PHP_EOL;
$output .= " <input type='submit' value='Upload File' name='submit'/><br />" . PHP_EOL;
$output .= '</form>' . PHP_EOL;
echo $output;
This is what HTML FORM looks like:
<form id="profileImageUpload" action='https://storage.googleapis.com/[BUCKET NAME]/' method='POST' enctype='multipart/form-data'>
<input name='https://storage.googleapis.com/[BUCKET NAME]/' value='attachment; filename=FILENAME' type='hidden'/>
<input name='https://storage.googleapis.com/[BUCKET NAME]/' value='profile_image.jpg' type='hidden'/>
<input name='https://storage.googleapis.com/[BUCKET NAME]/' value='GOOG4-RSA-SHA256' type='hidden'/>
<input name='https://storage.googleapis.com/[BUCKET NAME]/' value='[KEY STRING]' type='hidden'/>
<input name='https://storage.googleapis.com/[BUCKET NAME]/' value='20240129T231735Z' type='hidden'/>
<input name='https://storage.googleapis.com/[BUCKET NAME]/' value='6a540a66e3c1fde2b577b2624690e973f079b8f43a36071b20bef2c8f89ebdc0fad142717c5125938b69c3617cdb1a1635584181873eba5dde3956e131b96833788a1bbb0d1cdf9941aa95a9fa2d7ce37500feabd0941744ac5c754a9f57c7ac7b2717ed0e2bd207267e314cc1252d3634cf08c714b28cffeb13b1952e4f02072d3aafb32b8639b954411f615e86080488a868f0696b3c16f91da28f91e0255c9209d0e4a33b4edbbaf30dfd3479df21735601e9016aa7d83dafb0be67ad122d61277676acefceb876ad64c83578c6a53a02f1880bca6d5bba0e346e2cf8cb9f8e8ebf30cec7443ea5df52f5482d919bcba68a51fc3f33b3b3e6a79c03ac4303' type='hidden'/>
<input name='https://storage.googleapis.com/[BUCKET NAME]/' value='eyJjb25kaXRpb25zIjpbeyJDb250ZW50LURpc3Bvc2l0aW9uIjoiYXR0YWNobWVudDsgZmlsZW5hbWU9RklMRU5BTUUifSx7ImJ1Y2tldCI6ImVudGxhbmNlLXVzZXItZmlsZXMifSx7ImtleSI6InByb2ZpbGVfaW1hZ2UuanBnIn0seyJ4LWdvb2ctZGF0ZSI6IjIwMjQwMTI5VDIzMTczNVoifSx7IngtZ29vZy1jcmVkZW50aWFsIjoiZW50bGFuY2VAZW50bGFuY2UuaWFtLmdzZXJ2aWNlYWNjb3VudC5jb20vMjAyNDAxMjkvYXV0by9zdG9yYWdlL2dvb2c0X3JlcXVlc3QifSx7IngtZ29vZy1hbGdvcml0aG0iOiJHT09HNC1SU0EtU0hBMjU2In1dLCJleHBpcmF0aW9uIjoiMjAyNC0wMS0yOVQyMzoyNzozNVoifQ==' type='hidden'/>
<input type='file' name='profileImageFile'/><br />
<input type='submit' value='Upload File' name='submit'/><br />
</form>