Fixing Cross-Origin Issues with Nginx: A Practical CORS Guide
This tutorial explains the browser same‑origin policy, demonstrates a cross‑origin request failure between two servers, and shows how to configure Nginx with appropriate Access‑Control headers to enable CORS and allow the client to retrieve JSON data safely.
The browser’s same‑origin policy requires that the protocol, host (or IP), and port of a request match the page’s origin; otherwise the request is blocked as a cross‑origin request.
In the example, two servers A (port 80) and B (port 8080) are set up. Server A serves an HTML page that uses jQuery to request http://192.168.200.133:8080/getUser. Because the origins differ, the request is denied.
Step 1: Create the client page (a.html) in Nginx’s html directory
<html>
<head>
<meta charset="utf-8">
<title>跨域问题演示</title>
<script src="jquery.js"></script>
<script>
$(function(){
$("#btn").click(function(){
$.get('http://192.168.200.133:8080/getUser', function(data){
alert(JSON.stringify(data));
});
});
});
</script>
</head>
<body>
<input type="button" value="获取数据" id="btn"/>
</body>
</html>Step 2: Configure Nginx for both servers
Server B (port 8080) returns a JSON payload:
server {
listen 8080;
server_name localhost;
location /getUser {
default_type application/json;
return 200 '{"id":1,"name":"TOM","age":18}';
}
}Server A (port 80) serves the static HTML page:
server {
listen 80;
server_name localhost;
location / {
root html;
index index.html;
}
}After reloading Nginx, opening http://localhost and clicking the button triggers a cross‑origin error in the browser console.
Step 3: Resolve the CORS problem with response headers
In the /getUser location of Server B, add the Access-Control-Allow-Origin and Access-Control-Allow-Methods headers using the add_header directive:
location /getUser {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE;
default_type application/json;
return 200 '{"id":1,"name":"TOM","age":18}';
}These headers tell the browser that any origin may access the resource and which HTTP methods are permitted, eliminating the cross‑origin block.
After applying the headers and reloading Nginx, the AJAX request succeeds and the alert displays the JSON data.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Liangxu Linux
Liangxu, a self‑taught IT professional now working as a Linux development engineer at a Fortune 500 multinational, shares extensive Linux knowledge—fundamentals, applications, tools, plus Git, databases, Raspberry Pi, etc. (Reply “Linux” to receive essential resources.)
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.