How to Fix Cross-Origin Issues with Nginx: A Step‑by‑Step Demo
This guide explains when cross‑origin problems occur, demonstrates a concrete Nginx‑based example with client‑side JavaScript, and shows how to resolve the issue by adding the appropriate Access‑Control‑Allow‑Origin and Access‑Control‑Allow‑Methods headers.
When does a CORS problem appear?
If a page served from server A sends an asynchronous request to server B and the origins differ (protocol, host/IP, or port), the browser blocks the request due to the same‑origin policy.
Same‑Origin Policy
Two URLs are considered same‑origin only when protocol, domain (or IP), and port are identical. Non‑matching examples:
Different protocol: http://192.168.200.131/user/1 vs https://192.168.200.131/user/1 Different IP: http://192.168.200.131/user/1 vs http://192.168.200.132/user/1 Different port: http://192.168.200.131/user/1 vs http://192.168.200.131:8080/user/1 Different domain suffix: http://www.nginmx.com/user/1 vs http://www.nginx.org/user/1 Matching origin example: http://www.nginx.org:80/user/1 and
http://www.nginx.org/user/1Demo Setup
Two Nginx servers are used:
Server A (port 80) hosts a simple HTML page ( a.html) that uses jQuery to request http://192.168.200.133:8080/getUser and displays the returned JSON.
Server B (port 8080) provides the /getUser endpoint that returns a JSON object.
Client HTML ( a.html)
<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>Relevant Nginx configuration
# B server (port 8080)
server {
listen 8080;
server_name localhost;
location /getUser {
default_type application/json;
return 200 '{"id":1,"name":"TOM","age":18}';
}
}
# A server (port 80)
server {
listen 80;
server_name localhost;
location / {
root html;
index index.html;
}
}When the page is opened in a browser and the button is clicked, the request is blocked because the two servers do not share the same origin.
Solution: Adding CORS Headers
Modify the B‑server configuration to include add_header directives that tell the browser which origins and methods are allowed.
location /getUser {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE"; // adjust as needed
default_type application/json;
return 200 '{"id":1,"name":"TOM","age":18}';
}After reloading Nginx, the browser receives the Access-Control-Allow-Origin header and the AJAX request succeeds, displaying the JSON data.
Reference: https://www.cnblogs.com/rtnb/p/15860442.html
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.