The required CORS configurations should be done as OSGI configurations on the "Adobe Granite Cross Origin Resource Sharing Policy" as pointed out in the documentation that you already mentioned. OSGI configurations are a common pattern in the AEM tech stack and you will find some additional explanations in some of yourolderthreads on OSGI config topics. You should place an according OSGI config file (either XML or JSON format) in your code base, specifically into the ui.config module (if your project follows the AEM Maven archetype structure).
Please also refer to the following tutorial covering exactly your use case (as far as I understand your query):
Where in our source code should these XML files live? ==> ui.config/src/main/content/jcr_root/apps/mysite/config/ - will be mapped to /apps/mysite/config/ inside the repository)
What should they be called? ==> com.adobe.granite.cors.impl.CORSPolicyImpl-myproject.cfg.json - reflecting the CORS policy services PID aka fully qulified class name. It needs to be appended with a custom identifier (in my example: "-myproject") because it is a factory configuration and it is possible to deploy multiple instances for this specific service. Instead of the JSON format you could also use the XML format references in the above mentioned documentation.
Can CORS be configured with json osgi configs? ==> As stated above: yes, you can use either the XML or the JSON format for OSGI configurations.
How does one know what number to put on the end for new ones? ==> As mentioned above: this is a unique identifier for this configuration. You can choose whatever you want, e. g. a string that reflects the configs purpose or your project (in my example: "-myproject"). The suffix is not limited to numbers.
Just to confirm if you are really getting CORS error or Authentication error, since localhost:4502 is generally considered as author instance which requires authentication, so if you want to call any servlet which requires authentication then you need to set authorization header while calling the servlet/API.
Other then this question, resource type based servlets are more preferable than path based ones because of security, dispatcher allow config, etc
Here the exmaples are provided with XML. But if you want to use in AEM as Cloud, you can use the same as JSON and it can be stored under the osgi config folder where you kept all other OSGi configurations.
You need to add the your localhost:3000 to your allowedorigin property and it will allow you to make calls.