vue项目代码中代理部署后nginx请求代理

向右看齐 2024-03-02 08:28 40阅读 0赞

### vue项目 代码中代理 ###

## vue2.0 ##

文件地址：config/index.js

module.exports = {
        
      dev: {
        
    
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
        //设置代理 解决Vue跨域问题
          '/admin': {
        
            target: 'https://*******.com', //设置调用接口域名和端口号别忘了加http
            changeOrigin: true,
            pathRewrite: {
        
              '^/admin': '' //这里理解成用‘/’代替target里面的地址，组件中我们调接口时直接用代/替
              // 比如我要调用'http://0.0:300/user/add'，直接写‘/user/add’即可 代理后地址栏显示/
            }
          },
          '/crm': {
        
            target: 'https://*******.com', //设置调用接口域名和端口号别忘了加http
            changeOrigin: true,
            pathRewrite: {
        
              '^crm/': '' //这里理解成用‘/api’代替target里面的地址，组件中我们调接口时直接用代/api替
              // 比如我要调用'http://0.0:300/user/add'，直接写‘/api/user/add’即可 代理后地址栏显示/
            }
          },
          '/server': {
        
            target: 'https://*******.com', //设置调用接口域名和端口号别忘了加http
            changeOrigin: true,
            pathRewrite: {
        
              '^/server': '' //这里理解成用‘/api’代替target里面的地址，组件中我们调接口时直接用代/api替
              // 比如我要调用'http://0.0:300/user/add'，直接写‘/api/user/add’即可 代理后地址栏显示/
            }
          }
        },
      }
     }

使用说明

if (isTest == 0) {
        
      baseAdminUrl = '/admin/admin'
      baseCrmUrl = '/crm/crm'
      baseServerUrl = '/server/server'
    }
    
    // 5s 生产环境
    if (isTest == 1) {
        
      baseAdminUrl = '/admin'
      baseCrmUrl = '/crm'
      baseServerUrl = '/server'
    }
    
    //API使用
    
       this.$http.get(this.$global.baseServerUrl + '/api/requestStore'
            , config).then((res) => {
        
            for (let i = 0; i < res.data.data.length; i++) {
        
              this.stores.push(res.data.data[i]);
            }
            this.changeStores = this.stores;
          });

## vue3.0 ##

##### 配置 /vue.config.js 根目录下 #####

const {
        defineConfig} = require('@vue/cli-service')
    
    module.exports = defineConfig({
        
        transpileDependencies: true,
        lintOnSave: false,
        devServer: {
        
            open:false,
            allowedHosts: "all",
            host:'0.0.0.0',
            //配置启动端口号
            port:8080,
            hot:true,
            //配置代理
            proxy: {
        
                '/': {
        
                    ws: false,
                    // 请求的后端地址
                    target:'http://localhost:8888/',
                    changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                    pathRewrite:{
          // 路径重写，
                        //请求重写
                        '^/': ''  // 替换target中的请求地址，也就是说以后你在请求http://api.wpbom.com这个地址的时候直接写成/Api即可。
                    }
                }
            },
           /* proxy: {
                '/': {
                    ws: false,
                    target: ' http://localhost:8888/', // 你请求的第三方接口
                    changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                    pathRewrite: {  // 路径重写，
                        '^/': '/'  // 替换target中的请求地址，也就是说以后你在请求http://api.wpbom.com这个地址的时候直接写成/Api即可。
                    }
                }
            }*/
        }
    })

使用

this.$http({
        
                method: 'get',
                //  /就是proxy中的target地址
                url: '/user/login?name=' + this.loginForm.name + '&passWord=' + this.loginForm.passWord
              }).then(res => {
        
                if (res.data != null && res.data !== '') {
        
                  this.$global.user = res.data
                  localStorage.userId = res.data.id;
                  this.$router.push({
        
                    path: '/home'
                  })
                } else {
        
                  alert("用户名或密码错误")
                }
              }).catch(err => {
        
                alert("用户名或密码错误")
              })

## nginx的配置使用 ##

// 配置docker-compose 文件
    nginx:
        image: 605c77e624dd  # 使用官方Nginx Docker镜像
        container_name: nginx
        ports:
          - "9110:9110"
        volumes:
          - ../nginx/nginx.conf:/etc/nginx/nginx.conf:ro  # 将自定义的nginx.conf以只读方式挂载进来
          - ../nginx/html:/usr/share/nginx/html  # 如果需要的话，挂载你的静态文件或Web应用程序
          - ./nginx/logs:/var/log/nginx
        restart: always  # 如果容器停止了，自动重启容器

nginx,config 配置

worker_processes  1;
    events {
        
        worker_connections  1024; # 每个工作进程连接数
    }
    
    http{
        
    
      include       mime.types;
      default_type  application/octet-stream;
    
    server {
        
        listen 9110;
        server_name localhost;
    
        location / {
        
            root /usr/share/nginx/html;
            index  index.html index.htm;
    
        }
            location /admin/ {
        
            proxy_pass   http://********:10002/;
        } 
    
            location /crm/ {
            proxy_pass http://***********:9101/;
        }
    
    location /server/ {
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass   http://*********:444/server/;
          
        
     }