CORS Issue On Pivotal Cloud Foundry
If you are a frontend developer then you must have certainly encountered CORS issue while accessing a resource via HTTP/HTTPS.
CORS or Cross-Origin-Resource-Sharing is an HTTP-header based mechanism that allows a server to indicate any other origins than its own from which a browser should permit loading of resources.
In this article I am going to specify steps by which we can bypass CORS for a JavaScript application (built on react or angular or any other JavaScript framework) and deployed on Pivotal Cloud Foundry or PCF.
If you are facing CORS issue then you must make below changes to the application you are trying to access.
If you are deploying a JavaScript application to PCF using staticfile_buildpack then this article is for you.
- Build your application. If you are using react then run “ng run build”.
- Create a folder named “Deployment” inside the build folder and copy the contents of your build folder to the folder you just created. i.e., Deployment folder. This is how your folder will look like.
In my case, my build directory is called “build”.
3. Inside your build folder (or the folder that contains your build artifacts) which in my case is “build”, create a file named “Staticfile” without any extension and with the below content.
4. Create the folder structure nginx\conf\includes inside the “build” directory (same level as the “Deployment” directory).
5. Create a file named “headers.conf” inside the folder “nginx\conf\includes” and add the below content.
6. Once you are done with these changes then deploy your application to PCF.
7. After deployment is done, try accessing the deployed resource. You will not encounter CORS issue.
Happy Coding!!
