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;
        }
}
相关推荐
蓝胖的四次元口袋6 小时前
Docker Compose多容器编排与Nginx集群实战
运维·nginx·docker compose
默_笙6 小时前
🚋 从流水线到地铁网:为什么复杂 AI 都要拆成多 Agent(上)——LangGraph 基础入门
前端·javascript
科技苑7 小时前
前后端分离与微服务架构如何协同?
前端·后端·前端框架
神秘的猪头7 小时前
TypeScript 高级用法全解析:从泛型到 infer,把类型系统真正用起来
前端·typescript
moMo7 小时前
React Hooks 与闭包
前端·react.js
ID34610744207 小时前
【课程设计】基于Spring Boot+Vue的游戏账号租赁系统的设计与实现-计算机毕设 附源码50345
javascript·vue.js·spring boot·python·node.js·php·课程设计
柚yuzumi7 小时前
彻底搞懂 JavaScript 类型转换:显式转换、隐式转换与 ToPrimitive
前端·javascript·node.js
向北丶7 小时前
vscode 导入语句排序和删除未使用的导入
前端·visual studio code
PHP实战开发录7 小时前
PHP接口偶发变慢怎么查
前端·php·开发
师傅别念了8 小时前
Nginx 反向代理配置指南,看完这篇就够了
nginx