【Vue】尚融宝项目中解决前端部分80端口被占用的问题_vue 前端打包连接后端80端口-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41279172/article/details/116406935

本文介绍了在开发过程中遇到的前端跨域问题，由于80端口被占用导致无法正常通信。首先尝试通过命令行找出占用80端口的进程并试图关闭，但未成功。然后，通过修改前端项目的.env.development文件配置后台API地址，并在vue.config.js中设置代理，同时更新nginx配置来转发请求。最后，详细展示了vue项目中前后端联调的配置步骤，包括proxy和nginx的设置，解决了跨域问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在学习尚硅谷的尚融宝项目时，有进行前后端的联调。今天出现了一个这样的问题：
在这里插入图片描述
根本问题是由于跨域引起的，前端访问端口为80，我这里后台系统的端口是8110。
第一种解决思路是把占用80端口的程序干掉：
首先win+R打开运行界面，输入cmd，进入命令行界面
输入命令netstat -aon | findstr :80，我的电脑出现如下图所示界面
在这里插入图片描述
是4号进程占用了80端口，接着输入tasklist|findstr "4"

4号进程是系统进程，懵球了。。。
网上有一种解决方式是关掉Windows功能里的.Net的TCP端口共享，尝试了之后发现没有解决。此处参考自这篇博文
ps：如果80端口不是被系统进程占用是可以直接kill的

第二种思路是换前端项目里的配置端口：
在旧版本的vue-admin-template的目录结构中有一个config文件夹，可以在该文件夹下的dev.env.js文件中修改后台地址，但是新版本的目录结构中没有config文件夹了。
在这里插入图片描述
这个工程中配置后台地址是在.env.development文件中配置开发环境接入后台的地址，修改VUE_APP_BASE_API的值为后台接口地址

# just a flag
ENV = 'development'

# base api: 配置到后台nginx服务器
# 这里的值写自己的nginx服务器地址
VUE_APP_BASE_API = 'http://localhost:9002'

接着配置nginx的配置文件nginx.conf：

server {
        listen       9002;
        server_name  localhost;

        location ~ /core/ {
            proxy_pass http://localhost:8110;
        }

        location ~ /sms/ {
            proxy_pass http://localhost:8120;
        }

        location ~ /oss/ {
            proxy_pass http://localhost:8120;
        }
    }

然后在vue.config.js的module.exports中启用proxy代理:

devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: { //加上proxy里的内容
      [process.env.VUE_APP_BASE_API]: { //这里的目标地址与nginx地址相同
        target: "http://localhost:9002",
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    before: require('./mock/mock-server.js')
  },

这样就不会出现80端口占用的问题了。
第二种解决方案参考自这篇博文