vue配置多个接口请求地址

项目搭建的过程中,有多个后端接口地址,需要修改ngixn配置来匹配不同的接口

找到vue.config.js文件

查看反向代理设置的url

javascript 复制代码
   proxy: {
      // 名字可以自定义,这里我用的是api
      '/api': {
        target: 'http://urlA:88', // 反向代理地址
        changeOrigin: true, // 这里设置是否跨域
        timeout: 100*60*1000,
      },
    }

假设代理服务器ip地址为urlA,则urlA服务器对应的nginx文件配置内容如下:

以/api/v2开头的接口访问地址urlC ,其余以api开头访问地址urlB

shell 复制代码
server {
	listen 88; # 访问端口
        server_name urlA; # 本机地址
	gzip_static on;
        gzip_min_length 1k;
        gzip_buffers 4 8k;
        gzip_types text/plain Range application/javascript application/dicom application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
        gzip_vary on;
        gzip_http_version 1.0;

        server_tokens off;  #Server 隐藏 nginx版本信息
#        more_clear_headers 'Server'; #去除响应中Server字段

        location / {
                root /opt/project/shopping; #前端文件在服务器的存放位置
                      index index index.html;
               try_files $uri $uri/ /index.html;
        }
	    location @router {
                rewrite ^.*$ /index.html last;
        }
        location /api/{
                keepalive_timeout 3600s;
                client_body_timeout 3600s;
                fastcgi_buffers 10 500k;
                send_timeout 3600s;
                client_max_body_size 10G;
                proxy_request_buffering off;
                proxy_buffering off;
                proxy_connect_timeout 3600s;
                proxy_send_timeout 3600s;
                proxy_read_timeout 3600s;
                proxy_set_header Host $host;
                proxy_set_header X-Forwarder-For $remote_addr;
                proxy_http_version 1.1;
                proxy_set_header Connection "";

                proxy_pass http://urlB:8280;
                add_header Access-Control-Allow-Origin * always;
                add_header Access-Control-Allow-Methods *;
                add_header Access-Control-Allow-Credentials true always;
                add_header Access-Control-Max-Age 1728000 always;
                add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Cookies,Keep-Alive,Range,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Access-Control-Allow,Token,Accept,Authorization,x-auth-token always;
        }
        location ~ ^/api/(v2){
                keepalive_timeout 3600s;
                client_body_timeout 3600s;
                fastcgi_buffers 10 500k;
                send_timeout 3600s;
                client_max_body_size 10G;
                proxy_connect_timeout 3600s;
                proxy_send_timeout 3600s;
                proxy_read_timeout 3600s;
                proxy_set_header Host $host;
                proxy_set_header X-Forwarder-For $remote_addr;
                proxy_http_version 1.1;
		proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection $connection_upgrade;

                proxy_pass http://urlC:8380;
                add_header Access-Control-Allow-Origin * always;
                add_header Access-Control-Allow-Methods *;
                add_header Access-Control-Allow-Credentials true always;
                add_header Access-Control-Max-Age 1728000 always;
                add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Cookies,Keep-Alive,Range,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Access-Control-Allow,Token,Accept,Authorization,x-auth-token always;
        }
}
相关推荐
涛涛ing6 小时前
2026年最值得关注的前端变化,藏在“默认值”里
前端
量化分析码农6 小时前
股票历史数据的复权参数对照:多级别返回的字段与数值差异
java·javascript·后端
亿元程序员7 小时前
太牛了!这AI做出来的游戏,居然还能变现!
前端
hellice8 小时前
闪传 FlashDrop 实战:我用 300 行 Node 代码做了个「4 位取件码」临时文件中转站
前端·产品
用户0829773260058 小时前
RTX 5500 MIG 踩坑记录:切分之后模型跑不起来,排错整整一下午
前端
Lank_M8 小时前
AI 放大后的图更清楚,但它不能当原图入库
前端
Swot8 小时前
SvelteKit 数据流研究:`+page.js` 和 `+page.server.js` 到底谁在跑,数据又去了哪儿
前端·后端
用户4147679304158 小时前
Windows 触摸屏上 Swiper 轮播滑不动?可能是内部滚动容器抢走了你的手势
前端
张明君644518 小时前
从一个 Referer 引发的 403,到 SSR 服务失稳:Astro 流式渲染与缓存失效分析
前端
律宏阔8 小时前
微信小程序 + Taro + TDesign 去掉 [&&&],让普通 Tailwind 类接管局部样式
前端·微信小程序·taro