随笔- 306 文章- 0 评论- 39 阅读- 60万

cors问题复现

环境
配置前端服务器 (端口3000)
配置API服务器 (端口5000)
启用配置

环境

 Debian12
192.168.2.102/24
 
rambo@mac:~$ cat /etc/apt/sources.list.d/debian.sources 
Types: deb
URIs: https://mirrors.tuna.tsinghua.edu.cn/debian
Suites: bookworm bookworm-updates bookworm-backports
Components: main contrib non-free non-free-firmware
Signed-By: /usr/share/keyrings/debian-archive-keyring.gpg

配置前端服务器 (端口3000)

 rambo@mac:~$ sudo apt install -y nginx
rambo@mac:~$ sudo nginx -v
nginx version: nginx/1.22.1
 
 
 
rambo@mac:~$ sudo vim /etc/nginx/sites-available/frontend
server {
    listen 3000;
 
    root /var/www/html;
    index index.html;
 
    location / {
        try_files $uri $uri/ =404;
    }
}
 
 
 
rambo@mac:~$ sudo vim /var/www/html/index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CORS Issue</title>
</head>
<body>
    <h1>CORS Issue Example</h1>
    <button id="fetchData">Fetch Data</button>
    <script>
        document.getElementById("fetchData").addEventListener("click", () => {
            fetch("http://192.168.2.102:5000/api/data", {
                method: "GET",
            })
            .then(response => response.json())
            .then(data => console.log(data))
            .catch(error => console.error("Error:", error));
        });
    </script>
</body>
</html>

配置API服务器 (端口5000)

 rambo@mac:~$ sudo vim /etc/nginx/sites-available/api
server {
    listen 5000;
 
    location /api/ {
        default_type application/json;
        # 不设置 CORS（复现问题）
        add_header Access-Control-Allow-Origin "";          # 为空，不允许跨域
        return 200 '{"message": "Hello from the API server!"}';
    }
}

启用配置

 sudo ln -s /etc/nginx/sites-available/frontend    /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/api    /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

 rambo@mac:~$ cat /etc/nginx/sites-available/api
server {
    listen 5000;
 
    location /api/ {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
        add_header Access-Control-Allow-Headers "Content-Type";
 
        default_type application/json;
        return 200 '{"message": "Hello from the API server!"}';
    }
}
 
rambo@mac:~$ sudo systemctl reload nginx

posted @ 2024-12-02 11:41 Linux大魔王阅读(10) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Debian 12 更换国内/本地源

· debia12报错 perl: warning: Setting locale failed

· CORS跨域漏洞修复

· CORS漏洞复现

· 【可用】【一眼就会】Access-Control-Allow-Origin （CORS 头缺少 'Access-Control-Allow-Origin'）【重构跨域请求】【已解决】

阅读排行：
· winform 绘制太阳，地球，月球运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾（3.3-3.9）
· AI 智能体引爆开源社区「GitHub 热点速览」

公告

昵称： Linux大魔王
园龄： 7年11个月
粉丝： 25
关注： 17

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

付费(1)

Linux大魔王

生活的理想就是理想的生活～

cors问题复现

环境

配置前端服务器 (端口3000)

配置API服务器 (端口5000)

启用配置

公告

搜索

常用链接

我的标签

积分与排名

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	Debian12
	192.168.2.102/24

	rambo@mac:~$ cat /etc/apt/sources.list.d/debian.sources
	Types: deb
	URIs: https://mirrors.tuna.tsinghua.edu.cn/debian
	Suites: bookworm bookworm-updates bookworm-backports
	Components: main contrib non-free non-free-firmware
	Signed-By: /usr/share/keyrings/debian-archive-keyring.gpg

	rambo@mac:~$ sudo apt install -y nginx
	rambo@mac:~$ sudo nginx -v
	nginx version: nginx/1.22.1



	rambo@mac:~$ sudo vim /etc/nginx/sites-available/frontend
	server {
	listen 3000;

	root /var/www/html;
	index index.html;

	location / {
	try_files $uri $uri/ =404;
	}
	}



	rambo@mac:~$ sudo vim /var/www/html/index.html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>CORS Issue</title>
	</head>
	<body>
	<h1>CORS Issue Example</h1>
	<button id="fetchData">Fetch Data</button>
	<script>
	document.getElementById("fetchData").addEventListener("click", () => {
	fetch("http://192.168.2.102:5000/api/data", {
	method: "GET",
	})
	.then(response => response.json())
	.then(data => console.log(data))
	.catch(error => console.error("Error:", error));
	});
	</script>
	</body>
	</html>

	rambo@mac:~$ sudo vim /etc/nginx/sites-available/api
	server {
	listen 5000;

	location /api/ {
	default_type application/json;
	# 不设置 CORS（复现问题）
	add_header Access-Control-Allow-Origin ""; # 为空，不允许跨域
	return 200 '{"message": "Hello from the API server!"}';
	}
	}

	sudo ln -s /etc/nginx/sites-available/frontend /etc/nginx/sites-enabled/
	sudo ln -s /etc/nginx/sites-available/api /etc/nginx/sites-enabled/
	sudo nginx -t
	sudo systemctl reload nginx

	rambo@mac:~$ cat /etc/nginx/sites-available/api
	server {
	listen 5000;

	location /api/ {
	add_header Access-Control-Allow-Origin *;
	add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
	add_header Access-Control-Allow-Headers "Content-Type";

	default_type application/json;
	return 200 '{"message": "Hello from the API server!"}';
	}
	}

	rambo@mac:~$ sudo systemctl reload nginx