零基础自学Nginx 进阶篇 2 Nginx静态资源部署 2.6 Nginx的跨域问题解决 2.6.2 Nginx跨域问题的案例演示

朱雀 2024-03-26 13:56 17阅读 0赞

#### 零基础自学Nginx ####

#### 文章目录 ####

*   *   *  零基础自学Nginx
         *  进阶篇
         *  2 Nginx静态资源部署
         *   *  2.6 Nginx的跨域问题解决
             *   *  2.6.2 Nginx跨域问题的案例演示

[【黑马程序员Nginx教程，Java进阶从0到1学会Nginx分布式框架】 ][Nginx_Java_0_1_Nginx_]

![在这里插入图片描述][3ff12eb07d614b91a996fe4ea9bdd7d1.png_pic_center]

#### 进阶篇 ####

#### 2 Nginx静态资源部署 ####

##### 2.6 Nginx的跨域问题解决 #####

###### 2.6.2 Nginx跨域问题的案例演示 ######

出现跨域问题会有什么效果?,接下来通过一个需求来给大家演示下：

![在这里插入图片描述][75e49ef8b11d41eb9f4fffdb19225f49.png_pic_center]

> 当然这个IP 完全取决于大家自己的虚拟机IP，比如笔者就是 192.168.88.155

（1）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.88.155:8080/getUser',function(data){
          
                                    alert(JSON.stringify(data));
                            });
                    });
                });
            </script>
      </head>
      <body>
            <input type="button" value="获取数据" id="btn"/>
      </body>
    </html>

记得改成自己的IP

![在这里插入图片描述][d2fc45683a094ff1856e7a9eef14783c.png_pic_center]

（2）在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;
    	}
    }

![在这里插入图片描述][dc61d2e7ff6a4b6b8a698ff9971f6bb1.png_pic_center]

保存测试重新加载

![在这里插入图片描述][b5464f87c9934990ae946cb3da490831.png_pic_center]

(3)通过浏览器访问测试

![在这里插入图片描述][617686ef4764456e808d4a365d5efb4b.png_pic_center]

页面拿到了

单独拿一下那个json 数据

![在这里插入图片描述][eb5945aa31ea438bad09c6c7981bfe5f.png_pic_center]

也没有问题，但是这下我通过点击按钮去获取

![在这里插入图片描述][8015fe061acc4d51b64999e7b39768a5.png_pic_center]

这个错误想必大家已经再熟悉不过了【这就是出现了跨域问题】

[Nginx_Java_0_1_Nginx_]: https://www.bilibili.com/video/BV1ov41187bq/
[3ff12eb07d614b91a996fe4ea9bdd7d1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/984bcf4b3e414e1f902e6165e01daaa8.png
[75e49ef8b11d41eb9f4fffdb19225f49.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/5614a5d6619043c994da777fa0987641.png
[d2fc45683a094ff1856e7a9eef14783c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/9357783ca5e141679769e77dbafe7f9a.png
[dc61d2e7ff6a4b6b8a698ff9971f6bb1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/24e9bc8f2772468a8125f16fa34ff319.png
[b5464f87c9934990ae946cb3da490831.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ffe9c260454e434ca8119898c49d3b75.png
[617686ef4764456e808d4a365d5efb4b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/06efae6e6e7d4f58890b40f6af187a05.png
[eb5945aa31ea438bad09c6c7981bfe5f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/3439abf0a0304aeca089d7621f48ecc7.png
[8015fe061acc4d51b64999e7b39768a5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/9fb826fe8baf4dde983db2d60836d9c6.png