Nginx配置代理解决本地html进行ajax请求接口跨域问题

本是古典何须时尚 2023-09-30 19:42 9阅读 0赞

## 场景 ##

Nginx在Windows下载安装启动与配置前后端请求代理：

[Nginx在Windows下载安装启动与配置前后端请求代理\_霸道流氓气质的博客-CSDN博客][Nginx_Windows_-CSDN]

上面基于Vue的web项目进行代理请求后台接口。

如果是进行异地接口联调，访问后台接口都需要通过vpn访问，前端需求是使用

单html页面(带其他js、三方sdk资源)进行接口联调调用，后续需将该静态html

资源封装到APP中。若线上环境网络均是内网，不存在跨域问题，在联调阶段

如何进行模拟请求对接。

注：

博客：  
[霸道流氓气质的博客\_CSDN博客-C\#,架构之路,SpringBoot领域博主][CSDN_-C_SpringBoot]

## 实现 ##

1、通过vpn访问的第三方接口地址

![1067706bc2cf42fca79b6bc7cc5e6cc8.jpeg][]

假设这里的地址是

[http://1.2.3.4:18079/cardata/api/GetCarRealData][http_1.2.3.4_18079_cardata_api_GetCarRealData]

2、在html中直接通过ajax请求

$.ajax({
                  type: 'get',
                  url: 'http://1.2.3.4:18079/cardata/api/GetCarRealData',
                  dataType: 'json',
                  success: function (r) {
                    if (r && r.code === 200) {     
    
                     }
                  }
                })

在浏览器中转直接打开该本地html,请求时则会提示跨域问题。

3、所以需要使用nginx做一个请求的代理

修改nginx的配置文件

server {
            listen       900;
            server_name  127.0.0.1;
    
            #charset koi8-r;
    
            #access_log  logs/host.access.log  main;
    
            location / {
                root   D:/test/lrtest/;
                try_files $uri $uri/ /index.html;
                index  wsindex.html index.htm;
            }
      
            location /cardata/api/ {
                proxy_set_header Host $http_host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header REMOTE-HOST $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_pass http://1.2.3.4:18079/cardata/api/;
            }
      
            # redirect server error pages to the static page /50x.html
            #
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
    
            # proxy the PHP scripts to Apache listening on 127.0.0.1:80
            #
            #location ~ \.php$ {
            #    proxy_pass   http://127.0.0.1;
            #}
    
            # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
            #
            #location ~ \.php$ {
            #    root           html;
            #    fastcgi_pass   127.0.0.1:9000;
            #    fastcgi_index  index.php;
            #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
            #    include        fastcgi_params;
            #}
    
            # deny access to .htaccess files, if Apache's document root
            # concurs with nginx's one
            #
            #location ~ /\.ht {
            #    deny  all;
            #}
        }

这里将单html页面，这里是wsindex.html以及需要请求的js文件等放在d盘test/lrtest目录下

![58258656673b4e06aa00809bc402396d.jpeg][]

这里的

location / {
                root   D:/test/lrtest/;
                try_files $uri $uri/ /index.html;
                index  wsindex.html index.htm;
            }

就是配置静态html的路径

然后配置请求代理

location /cardata/api/ {
                proxy_set_header Host $http_host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header REMOTE-HOST $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_pass http://1.2.3.4:18079/cardata/api/;
            }

将/cardata/api/开头的请求代理到 [http://1.2.3.4:18079/cardata/api/][http_1.2.3.4_18079_cardata_api]

然后保存配置文件，启动Nginx,访问

[http://127.0.0.1:900/][http_127.0.0.1_900]

可以发现ajax请求不再有跨域问题

![620f559a997b438f9e1a4779444be199.jpeg][]

[Nginx_Windows_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108122023
[CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi
[1067706bc2cf42fca79b6bc7cc5e6cc8.jpeg]: https://img-blog.csdnimg.cn/1067706bc2cf42fca79b6bc7cc5e6cc8.jpeg
[http_1.2.3.4_18079_cardata_api_GetCarRealData]: http://1.2.3.4:18079/cardata/api/GetCarRealData
[58258656673b4e06aa00809bc402396d.jpeg]: https://img-blog.csdnimg.cn/58258656673b4e06aa00809bc402396d.jpeg
[http_1.2.3.4_18079_cardata_api]: http://1.2.3.4:18079/cardata/api/
[http_127.0.0.1_900]: http://127.0.0.1:900/
[620f559a997b438f9e1a4779444be199.jpeg]: https://img-blog.csdnimg.cn/620f559a997b438f9e1a4779444be199.jpeg