Nginx的add_header指令解决跨域问题

同源策略
跨域问题
- 跨域问题的案例演示
解决方案

大佬文章，请优先查看！！！
推荐文章👉👉：Nginx 轻松搞定跨域问题

同源策略

浏览器的同源策略：是一种约定，是浏览器最核心也是最基本的安全功能，如果浏览器少了同源策略，则浏览器的正常功能可能都会受到影响。

同源:

协议、域名(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
满足

跨域问题

简单描述下:

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

跨域问题的案例演示

出现跨域问题会有什么效果?

nginx的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>

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

通过浏览器访问测试

解决方案

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

语法：

add_header name value...

默认值：

—

位置：

http、server、location

此处用来解决跨域问题，需要添加两个头信息。

Access-Control-Allow-Origin

Access-Control-Allow-Methods

属性	说明
Access-Control-Allow-Origin	直译过来是允许跨域访问的源地址信息，可以配置多个(多个用逗号分隔)，也可以使用`*`代表所有源
Access-Control-Allow-Methods	直译过来是允许跨域访问的请求方式，值可以为 GET、POST、PUT、DELETE...,可以全部设置，也可以根据需要设置，多个用逗号分隔
Access-Control-Allow-Headers	跨域允许携带的特殊头信息字段

具体配置方式：

 location /getUser{
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE;
    #add_header Access-Control-Allow-Headers 'authorization'; 
    default_type application/json;
    return 200 '{"id":1,"name":"TOM","age":18}';
}

上一篇责任链模式

下一篇RabbitMQ 插件控制界面

posted @ 2023-08-13 22:59 Lz_蚂蚱阅读(604) 评论(0) 编辑收藏举报

刷新页面返回顶部

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

Lz_蚂蚱

Nginx的add_header指令解决跨域问题

同源策略

跨域问题

跨域问题的案例演示

解决方案

公告

积分与排名

合集

随笔分类

随笔档案

	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
	满足

	<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>

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

	location /getUser{
	add_header Access-Control-Allow-Origin *;
	add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE;
	#add_header Access-Control-Allow-Headers 'authorization';
	default_type application/json;
	return 200 '{"id":1,"name":"TOM","age":18}';
	}