小言_互联网的博客

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

437人阅读  评论(0)

场景

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

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

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

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

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

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

如何进行模拟请求对接。

注:

博客:
霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主

实现

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

 

假设这里的地址是

http://1.2.3.4:18079/cardata/api/GetCarRealData

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


  
  1.             $.ajax({
  2.               type: 'get',
  3.               url: 'http://1.2.3.4:18079/cardata/api/GetCarRealData',
  4.               dataType: 'json',
  5.               success: function (r) {
  6.                 if (r & & r. code = = = 200) {     
  7.                  }
  8.               }
  9.             })

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

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

修改nginx的配置文件


  
  1.     server {
  2.         listen       900;
  3.         server_name  127.0.0.1;
  4.         #charset koi 8-r;
  5.         # access_log  logs /host. access.log  main;
  6.         location / {
  7.             root   D: / test /lrtest /;
  8.             try_files $uri $uri / / index.html;
  9.             index  wsindex.html index.htm;
  10.         }
  11.   
  12.         location /cardata /api / {
  13.             proxy_ set_header Host $http_host;
  14.             proxy_ set_header X-Real-IP $remote_addr;
  15.             proxy_ set_header REMOTE-HOST $remote_addr;
  16.             proxy_ set_header X-Forwarded-For $proxy_ add_x_forwarded_ for;
  17.             proxy_pass http: / / 1.2.3.4: 18079 /cardata /api /;
  18.         }
  19.   
  20.         # redirect server error pages to the static page / 50x.html
  21.         #
  22.         error_ page   500 502 503 504  / 50x.html;
  23.         location = / 50x.html {
  24.             root   html;
  25.         }
  26.         # proxy the PHP scripts to Apache listening on 127.0.0.1: 80
  27.         #
  28.         # location ~ \.php$ {
  29.         #    proxy_pass   http: / / 127.0.0.1;
  30.         #}
  31.         # pass the PHP scripts to FastCGI server listening on 127.0.0.1: 9000
  32.         #
  33.         # location ~ \.php$ {
  34.         #    root           html;
  35.         #    fastcgi_pass   127.0.0.1: 9000;
  36.         #    fastcgi_ index  index.php;
  37.         #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
  38.         #    include        fastcgi_params;
  39.         #}
  40.         # deny access to .htaccess files, if Apache 's document root
  41.         # concurs with nginx's one
  42.         #
  43.         # location ~ /\.ht {
  44.         #    deny  all;
  45.         #}
  46.     }

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

 

这里的


  
  1.         location / {
  2.             root   D: / test /lrtest /;
  3.             try_files $uri $uri / / index.html;
  4.             index  wsindex.html index.htm;
  5.         }


就是配置静态html的路径

然后配置请求代理


  
  1.         location /cardata /api / {
  2.             proxy_ set_header Host $http_host;
  3.             proxy_ set_header X-Real-IP $remote_addr;
  4.             proxy_ set_header REMOTE-HOST $remote_addr;
  5.             proxy_ set_header X-Forwarded-For $proxy_ add_x_forwarded_ for;
  6.             proxy_pass http: / / 1.2.3.4: 18079 /cardata /api /;
  7.         }

将/cardata/api/开头的请求代理到 http://1.2.3.4:18079/cardata/api/

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

http://127.0.0.1:900/

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

 


转载:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/129180455
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场