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;
        }
}
相关推荐
web小白成长日记6 小时前
企业级 Vue3 + Element Plus 主题定制架构:从“能用”到“好用”的进阶之路
前端·架构
APIshop7 小时前
Python 爬虫获取 item_get_web —— 淘宝商品 SKU、详情图、券后价全流程解析
前端·爬虫·python
风送雨7 小时前
FastMCP 2.0 服务端开发教学文档(下)
服务器·前端·网络·人工智能·python·ai
XTTX1107 小时前
Vue3+Cesium教程(36)--动态设置降雨效果
前端·javascript·vue.js
LYFlied8 小时前
WebGPU与浏览器边缘智能:开启去中心化AI新纪元
前端·人工智能·大模型·去中心化·区块链
Setsuna_F_Seiei8 小时前
2025 年度总结:人生重要阶段的一年
前端·程序员·年终总结
model20058 小时前
alibaba linux3 系统盘网站迁移数据盘
java·服务器·前端
han_9 小时前
从一道前端面试题,谈 JS 对象存储特点和运算符执行顺序
前端·javascript·面试
aPurpleBerry9 小时前
React 01 目录结构、tsx 语法
前端·react.js
jayaccc9 小时前
微前端架构实战全解析
前端·架构