vue测试 Nginx代理调用三方接口

最新推荐文章于 2025-04-21 11:59:04 发布

原创最新推荐文章于 2025-04-21 11:59:04 发布 · 770 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #运维

文章讲述了如何在Vue项目中利用Nginx配置实现对第三方API的代理调用，包括基本的Nginx配置和Vue代码示例，以及如何处理WebSocket请求的转发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue测试 Nginx代理调用三方接口

nginx.conf配置

增加/qtapi

worker_processes  1;
events {
    worker_connections  1024;
}
http {
	client_max_body_size 20m;
    include       mime.types;
    default_type  application/octet-stream;   
    sendfile        on;
    keepalive_timeout  65;
    gzip  on;
    server {
		#网站端口
        listen       9080;
        server_name  localhost;
        location / {
			#网站目录
            root   html/www;
            index  index.html index.htm;
        }
		#websocket转发
		location /ws {
			proxy_pass http://localhost:9000;
			proxy_http_version 1.1;
			proxy_set_header Upgrade $http_upgrade;
			proxy_set_header Connection "upgrade";
		}
		location ~ /oa/ {
			#反向代理oa路径的转到
			#pss服务9000端口
            proxy_pass  http://127.0.0.1:9000;
		}      
		location /qtapi {
			proxy_pass https://api.j4u.ink/v1/store/other/proxy/remote/moyu.json;
		}
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

vue代码

import request from '@/utils/request';

postProxyNginx(){
             //Nginx代理测试
            /*nginx.conf配置
            server {
                location /qtapi {
                    proxy_pass https://api.j4u.ink/v1/store/other/proxy/remote/moyu.json;
                }
            }
            */
            request ({
                url: 'http://127.0.0.1:9080/qtapi',
                method: "get"
            }).then(res => {
				console.log('请求成功',res);
                that.ret='请求成功\n'+JSON.stringify(res)
			}).catch(err => {
                console.log('请求失败',err);     
                that.ret='请求失败\n'+JSON.stringify(err)         
			});
        },