Nginx的跨域问题解决

最新推荐文章于 2024-08-30 11:34:52 发布

jackwade666

最新推荐文章于 2024-08-30 11:34:52 发布

阅读量424

点赞数 5

文章标签： nginx 运维

本文链接：https://blog.csdn.net/weixin_42942786/article/details/140804605

版权

Nginx的跨域问题解决

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


```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添加以下配置

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