【利用 Nginx 反向代理解决跨域问题】

最新推荐文章于 2024-06-06 13:38:00 发布

唯有碎银解千愁

最新推荐文章于 2024-06-06 13:38:00 发布

阅读量2.1k

点赞数

文章标签： nginx

本文链接：https://blog.csdn.net/u010696176/article/details/121521726

版权

利用 Nginx 反向代理解决跨域问题

用Nginx解决跨域

用Nginx要解决的问题就是跨域，只要是前后端分离就会出现跨域。跨域是因为协议、IP、端口其中的一个不相同。我们想要解决跨域问题，就是让浏览器感觉是在同一个协议、IP、端口下。

参考博客

参考1 : https://blog.csdn.net/rolinabc/article/details/111881458
参考2 : https://blog.csdn.net/weixin_45055486/article/details/109233261（新建前端页面）

环境搭建

【参考1】这位大神写的挺好的，但是这里面有一些具体的东西没有说的太明白。比如前端是如何来的，里面只说了前端地址，但是他没说具体，如端口是怎么来的。
【参考2】，只要页面访问有端口的页面就必须，要一个容器去运行你对应的访问页面，容器可以是tomcat，也可以是IDEA，等。

前端页面代码

如果按照【参考2】操作，在新建的页面中添加代码
下面展示一些 `内联代码片`。

<html>
<head>
    <title></title>
</head>
<body>
<button onclick="sendAjax()">sendAja</button>
<span id="content"></span>
<script type="text/javascript">
    var sendAjax = () => {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://localhost:8000/api/getValue', true);
        xhr.send();
        xhr.onreadystatechange = function (e) {
            if (xhr.readyState == 4 && xhr.status == 200) {
                alert(xhr.responseText);
                console.log(xhr.responseText);
            }
        };
    }
</script>
</body>
</html>

Nginx配置

前端：http://localhost:63342/untitled/index.html
后端：http://localhost:18801/getValue
Nginx：http://localhost:8000
配置之前我们分别验证前端和后端是否可用
访问前端地址
在这里插入图片描述

这是后端地址访问的结果
在这里插入图片描述

配置地址在：nginx-1.14.2\conf下这个（nginx.conf）文件。
如果都在一个服务器上面，端口一定不能一样，如果不在同一个服务上，ip和端口没有要求 内联代码片

server {
        listen       8000;
        server_name  localhost;

        #charset koi8-r;
        #access_log  logs/host.access.log  main;
		location / {
		   #这个地址是你直接能在浏览器里面访问到的地址
           proxy_pass http://localhost:63342/untitled/index.html;
        }
        location /api {
           #这个地址是你，能访问到的后端地址，只要ip和端口
           proxy_pass http://localhost:18801/;
        }
    }

把页面中的url地址，端口后面添加一个api，这个api就是你在Nginx里面配置的代理字段。

url:'http://localhost:18801/getValue',
url:'http://localhost:8000/api/getValue',

如果你是写的是get请求的话，你可以直接在浏览器里面访问，会返回给你对应的值。

访问Nginx查看

地址：http://localhost:8000/
在这里插入图片描述

总结

把前端地址和后端地址都通过Nginx转发，这样浏览器访同Nginx，就实现同一个协议、IP、端口，实现跨域请求。

唯有碎银解千愁

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【利用 Nginx 反向代理解决跨域问题】

利用 Nginx 反向代理解决跨域问题用Nginx解决跨域我们用Nginx要解决的问题就是跨域，只要是前后端分离就会出现跨域。跨域是因为协议、IP、端口其中的一个不相同。我们想要解决跨域问题，就是让浏览器感觉我们是在同一个协议、IP、端口下，然后去访问Nginx的地址而不是前端地址。
复制链接

扫一扫