Nginx从入门到入坟（八）- Nginx的跨域问题_nginx跨域允许多个-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44758876/article/details/124313934

1. 同源策略

浏览器的同源策略：是一种约定，是浏览器最核心也是最基本的安全功能，如果浏览器少了同源策略，则浏览器的正常功能可能都会受到影响。
同源：协议、域名(IP)、端口相同即为同源。

http://192.168.200.131/user/1
https://192.168.200.131/user/1
非同源

http://192.168.200.131/user/1
http://192.168.200.132/user/1
非同源

http://192.168.200.131/user/1
http://192.168.200.131:8080/user/1
非同源

http://www.nginx.com/user/1
http://www.nginx.org/user/1
非同源

http://192.168.200.131/user/1
http://192.168.200.131:8080/user/1
非同源

http://www.nginx.org:80/user/1
http://www.nginx.org/user/1
同源

2. 跨域问题

有两台服务器分别为A、B，如果从服务器A的页面发送异步请求到服务器B获取数据，如果服务器A和服务器B不满足同源策略，则就会出现跨域问题。

3. 跨域问题的案例演示

接下来通过一个需求来给大家演示下出现跨域问题会有什么效果：
在这里插入图片描述

nginx 的 html 目录下新建一个a.html；

<html>
	<head>
		<meta charset="utf-8">
		<title>跨域问题演示</title>
		<script src="jquery.js"></script>
		<script>
			$(function(){
				$("#btn").click(function(){
					$.get('http://10.7.2.205:8080/getUser',function(data){
						alert(JSON.stringify(data));
					});
				});
			});
		</script>
	</head>
	<body>
		<input type="button" value="获取数据" id="btn"/>
	</body>
</html>

在nginx.conf配置如下内容：

server{
	listen 8080;
	server_name localhost;
	location /getUser{
		default_type application/json;
		return 200 '{"id":1,"name":"TOM","age":18}';
	}
}
server{
	listen 80;
	server_name localhost;
	location /{
		root html;
		index index.html;
	}
}

通过浏览器访问测试：

4. 解决方案

使用add_header指令，该指令可以用来添加一些头信息。

语法	add_header name value…
默认值	-
位置	http、server、location

此处用来解决跨域问题，需要添加两个头信息，分别是AccessControl-Allow-Origin和Access-Control-Allow-Methods。
Access-Control-Allow-Origin：直译过来是允许跨域访问的源地址信息，可以配置多个（多个用逗号分隔），也可以使用*代表所有源。
Access-Control-Allow-Methods：直译过来是允许跨域访问的请求方式，值可以为 GET POST PUT DELETE…，可以全部设置，也可以根据需要设置，多个用逗号分隔。
具体配置方式：

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}';
}

执行./nginx -s reload命令重新加载配置，再次查看效果：

在这里插入图片描述