vue proxy代理和 Nginx 配置跨域

news2024/9/26 1:20:08

vue.config.js文件中配置的代理：

 devServer: {
    port: 9095,
    // open: true, // 配置项目在启动时自动在浏览器打开
    proxy: {
      '/yh': { // '/api'是代理标识，一般是每个接口前的相同部分
        target: "http://192.168.5.58:8002", // 请求地址，一般是服务器地址
        changeOrigin: true, // 是否进行跨域
        // pathRewrite: { // pathRewrite的作用是把请求接口中的 '/api'替换掉，一般是替换为空""
        //     '^/api':""
        // }
      },
      '/yf': {
        target: "http://192.168.1.140:9001",  
        changeOrigin: true,
        pathRewrite: {
          '^/yf': ""
        }
      },
    },
  }

现在在Nginx上做配置
nginx安装请参考：Nginx安装Mac

终端命令cd到nginx所在的目录：cd /opt/homebrew/etc/nginx
cat到nginx.conf 文件：cat nginx.conf
修改该文件： vim nginx.conf (i 进入，配置后，ESC，:wq退出)
在这里插入图片描述
启动服务：brew services start nginx
查看nginx进程： ps -ef | grep nginx
打开页面：locahost:8080（http://127.0.0.1:8080）
我这边是把项目代码打包后，dist存放在 /opt/homebrew/Cellar/web-test/dist;
打开直接是项目页面；

所用到相关的命令：

安装目录  /opt/homebrew/etc/nginx/  （commd+shift+g）或者cd /opt/homebrew/etc/nginx/
启动服务：brew services start nginx
查看nginx进程： ps -ef | grep nginx
修改nginx配置文件：vim nginx.conf    （i进入，修改后，ESC， :wq退出）
Nginx重启命令：brew services restart nginx
查看启动是否成功：brew services info nginx
访问地址：http://localhost:8080