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

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/;
      
    
 }