使用nginx反向代理解决端口跨域的问题

最新推荐文章于 2024-12-04 14:16:31 发布

原创最新推荐文章于 2024-12-04 14:16:31 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

系统运维专栏收录该内容

72 篇文章

订阅专栏

本文讲述了如何通过Nginx配置解决web前端在不同端口访问后端API时遇到的跨域问题，重点介绍了在49.23.11.2公网IP上设置代理到127.0.0.1:8822的详细步骤。

场景描述：
web前端代码和后端代码在同一台服务器上，使用不同的端口，在使用js调用的时候出现跨域访问的问题，

公网IP是49.23.11.2

实现web前端调用http://49.232.119.23:8899/api/echarts/list
解析跳转到http://127.0.0.1:8822/

我们使用nginx反向代理解决这个跨域的问题，如下配置：

[root@prod logs]# cat /usr/local/nginx/conf/conf.d/text.conf
server {
        listen       8899;   #监听端口
        server_name  49.23.11.2;  #公网IP
        root   /data/projects/webs/poc-web/dist;   #web端代码
        index index.html  index.htm;
        location  /api/ {
                proxy_pass http://127.0.0.1:8822/;   #访问目标的地址
                access_log logs/access.log;
                error_log logs/errlog.log debug;
        }
        location  / {
             try_files $uri $uri/ /index.html;
        }
}