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;
        }
}
相关推荐
大飞记Python19 分钟前
部门管理|“编辑部门”功能实现(Django5零基础Web平台)
前端·数据库·python·django
tsumikistep1 小时前
【前端】前端运行环境的结构
前端
你的人类朋友1 小时前
【Node】认识multer库
前端·javascript·后端
Aitter1 小时前
PDF和Word文件转换为Markdown的技术实现
前端·ai编程
mapbar_front2 小时前
面试问题—上家公司的离职原因
前端·面试
昔人'3 小时前
css使用 :where() 来简化大型 CSS 选择器列表
前端·css
昔人'3 小时前
css `dorp-shadow`
前端·css
流***陌3 小时前
扭蛋机 Roll 福利房小程序前端功能设计:融合趣味互动与福利适配
前端·小程序
可触的未来,发芽的智生3 小时前
新奇特:黑猫警长的纳米世界,忆阻器与神经网络的智慧
javascript·人工智能·python·神经网络·架构
烛阴4 小时前
用 Python 揭秘 IP 地址背后的地理位置和信息
前端·python