Nginx的跨域问题解决

jackwade6662024-07-31 22:46

Nginx的跨域问题解决

假设有两台服务器：分别是192.168.101.23（nginx1）, 192.168.101.18（nginx2）

在nginx2上有一个get_user资源。

#nginx2

powershell 复制代码

```powershell
 location /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_user

nginx1编写如下页面
#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添加以下配置

powershell 复制代码

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

./nginx -t 测试配置文件是否在正确

./nginx -s reload 重新加载文件

访问测试：