Help With GCS Cors

[frontpageads]

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>