NGINX Blocks for Cross-Origin Request Tech Support Deployment
In this article, we will discuss the implementation of NGINX blocks for Cross-Origin Resource Sharing (CORS) to support the deployment of a React app on an Ubuntu VM with a basic NGINX server. The architecture of the application is as follows: NGINX → React → Spring → localhost:5173. Everything works fine, but a problem arises...
What is Cross-Origin Resource Sharing (CORS)?
Cross-Origin Resource Sharing (CORS) is a mechanism that allows many resources (e.g., fonts, JavaScript, etc.) on a web page to be requested from another domain outside the domain from which the resource originated. CORS defines a way in which browsers and servers can interact to determine whether it is safe to allow the cross-origin request.
Why Do We Need CORS for React App Deployment on NGINX Server?
By default, web browsers restrict cross-origin HTTP requests initiated from scripts for security reasons. For example, XMLHttpRequest and Fetch API follow the same-origin policy. This means that a web application using these APIs can only request resources from the same origin as the application, unless the server supports CORS.
Therefore, when deploying a React app on an NGINX server, we need to configure NGINX blocks to support CORS. This will allow the React app to make cross-origin requests to the Spring backend running on localhost:5173.
Implementing NGINX Blocks for CORS
To implement NGINX blocks for CORS, we need to add the following configuration to the NGINX server block:
location / {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
if ($request_method = 'OPTIONS') {
return 200;
}
try_files $uri /index.html;
}
The above configuration adds the necessary CORS headers to the response. The 'Access-Control-Allow-Origin' header is set to '*', which means that any origin is allowed to access the resource. The 'Access-Control-Allow-Methods' header is set to 'GET, POST, OPTIONS', which means that GET, POST, and OPTIONS requests are allowed. The 'Access-Control-Allow-Headers' header is set to a list of headers that are allowed. Finally, if the request method is 'OPTIONS', the server returns a 200 OK response without any body.
Testing the Configuration
To test the configuration, we can use the curl command to make a cross-origin request to the React app:
curl -X OPTIONS -H "Access-Control-Request-Method: GET" -H "Origin: http://example.com" http://your-nginx-server/
The above command sends an OPTIONS request to the NGINX server with the 'Access-Control-Request-Method' header set to 'GET' and the 'Origin' header set to '
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type
- Cross-Origin Resource Sharing (CORS) is a mechanism that allows resources to be requested from another domain outside the domain from which the resource originated.
- When deploying a React app on an NGINX server, we need to configure NGINX blocks to support CORS to allow the React app to make cross-origin requests to the backend.
- To implement NGINX blocks for CORS, we need to add the necessary CORS headers to the response using the 'add\_header' directive.
- We can test the configuration using the curl command to make a cross-origin request to the React app.