Nginx的跨域问题解决

ops/2024/10/11 7:32:09/

Nginx的跨域问题解决

假设有两台服务器：分别是192.168.101.23（nginx1）, 192.168.101.18（nginx2）
在nginx2上有一个get_user资源。
#nginx2


```powershelllocation /get_user {default_type application/json;return 200 '{"id":1,"name":"jack","age":18}';
}

nginx2访问自己的资源测试，可以正确访问
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/0a111fe642ed4512a00e246e0e5612c2.png)
这时使用nginx1的服务访问nginx2的get_usernginx1编写如下页面
#nginx1下的html文件夹->cross.html文件
页面点击"获取数据"按钮提示以下错误：```powershell<html><head><meta charset="utf-8"><title>跨域问题演示</title><script src="jquery.js"></script><script>$(function(){$("#btn").click(function(){$.get('http://192.168.101.18:8080/get_user',function(data){alert(JSON.stringify(data));});});});</script></head><body><input type="button" value="获取数据" id="btn"/></body>
</html>

通过F12可以看到提示：CORS Missing Allow Origin
在这里插入图片描述

如何解决上面的跨域问题？

add_header指令

指令	add_header
默认值	无
位置	http, server, location
用途	向HTTP响应头添加新的头部或修改现有头部

此处用来解决跨域问题，需要添加两个头信息，一个是Access-Control-Allow-Origin,Access-Control-Allow-Methods
Access-Control-Allow-Origin: 表示允许跨域访问的源地址信息，可以配置多个(多个用逗号分隔)，也可以使用*代表所有源
Access-Control-Allow-Methods:表示允许跨域访问的请求方式，值可以为 GET POST PUT DELETE…,可以全部设置，也可以根据需要设置，多个用逗号分隔
在nginx2中的nginx.conf添加以下配置

 location /get_user {add_header Access-Control-Allow-Origin http://192.168.101.23;#nginx1服务的地址add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE;default_type application/json;return 200 '{"id":1,"name":"jack","age":18}';}