CORS configuration in Nginx - Mini Project: Build & Apply

CORS Configuration in nginx

📖 Scenario: You are setting up a web server using nginx. Your website needs to allow other websites to request resources from it safely. This is done by configuring CORS (Cross-Origin Resource Sharing) headers.

🎯 Goal: You will create an nginx configuration that allows cross-origin requests from a specific website by adding the correct CORS headers.

📋 What You'll Learn

Create a basic nginx server block configuration

Add a variable to hold the allowed origin URL

Add the CORS headers using the variable

Print the final nginx configuration to verify

💡 Why This Matters

🌍 Real World

Web servers often need to allow safe cross-origin requests for APIs or resources. Configuring CORS headers in nginx is a common task to enable this.

💼 Career

DevOps and site reliability engineers frequently configure nginx for web applications. Understanding CORS setup helps ensure secure and functional web services.

1

Create basic nginx server block

Create a basic nginx server block configuration with server listening on port 80 and serving from /var/www/html.

Nginx

# Your code here

Need a hint?

Use server { ... } block with listen 80; and root /var/www/html;.

2

Add allowed origin variable

Add a variable called $allowed_origin and set it to https://example.com inside the server block.

Nginx

server {
    listen 80;
    root /var/www/html;
    # Your code here
}

Need a hint?

Use set $allowed_origin "https://example.com"; inside the server block.

3

Add CORS headers

Inside the server block, add a location / block. Inside it, add these headers using add_header: Access-Control-Allow-Origin set to $allowed_origin, Access-Control-Allow-Methods set to GET, POST, OPTIONS, and Access-Control-Allow-Headers set to Origin, Content-Type, Accept.

Nginx

server {
    listen 80;
    root /var/www/html;
    set $allowed_origin "https://example.com";
    # Your code here
}

Need a hint?

Use location / { ... } and add the three add_header lines inside it.

4

Print final nginx configuration

Print the entire nginx configuration to verify it includes the server block with the set $allowed_origin and the location / block with the CORS headers.

Nginx

# Your code here to print the configuration

Need a hint?

Print the full nginx configuration text exactly as written.