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;
        }
}
相关推荐
豆苗学前端12 小时前
Vue 2 vs Vue 3 响应式原理深度对比(源码理解层面,吊打面试官)
前端·javascript·面试
无名修道院12 小时前
XSS 跨站脚本攻击:3 种类型(存储型 / 反射型 / DOM 型)原理以 DVWA 靶场举例
前端·网络安全·渗透测试·代码审计·xss
代码猎人12 小时前
CSS可继承属性和不可继承属性有哪些
前端
用户447831536023212 小时前
基于 vue3 完成动态组件库建设
前端
serve the people12 小时前
AI 模型识别 Nginx 流量中爬虫机器人的防御机制
人工智能·爬虫·nginx
xhxxx12 小时前
Vite + React 黄金组合:打造秒开、可维护、高性能的现代前端工程
前端·react.js·vite
Evan芙12 小时前
基于Nginx和Python的动态站点安装配置
数据库·python·nginx
用户81686947472512 小时前
深入 useState、useEffect 的底层实现
前端·react.js
Tzarevich12 小时前
React 中的 JSX 与组件化开发:以函数为单位构建现代前端应用
前端·react.js·面试
李香兰lxl12 小时前
A I时代如何在研发团队中展现「前端」的魅力
前端