项目部署后,前端vue代理失效问题解决

title:工作日记,前段后分离项目,在部署时遇到的问题,Vue项目打包成dist文件之后放在服务器上,通过运行java-jar包,在application.yml中引入静态资源的方式访问前端。如下图所示:

问题1:前端页面是可以访问到了,但是后端访问不到,在本地中运行就可以。

首先前端我在vite.config.ts 配置的代理服务器,在本地启动起来是可以的并且不会有跨域问题,放在服务器上代理就失效了。

答案:我们将项目打包成dist静态文件后,代理服务器就被抽离出来了,所以访问不到(网上看到的)

解决:如果是通过上图中的方式引入的静态文件,则不需要配置代理,直接访问后端接口即可,否则就需要配置代理服务器nginx。

nginx简介:

  1. 什么是nginx:

    Nginx ("engine x")是一个高性能的HTTP和反向代理服务器,特点是占有内存少,并发能力强,事实上nginx.的并发能力确实在同类型的网页服务器中表现较好Nginx,专为性能优化而开发,性能是其最重要的考量,实现上非常注重效率,能经受高负载的考验,有报告表明能支持高达50,000个并发连接数。·

  2. 反向代理

    server {
        listen       8089;       #监听的端口号
        server_name  localhost;  #浏览器通过访问这个地址和端口就能请求到nginx 
       
         location / {  
             proxy_pass http://127.0.0.1:5173/;   #这个为前端项目的访问地址
             #root   html;
             #index  index.html index.htm;   
        }
        location /api/ {   
            #前端向后端发出地址请求http://localhost:8089/api/user/login
            #就会将地址替换成 http://localhost:8050/user/login
              proxy_pass http://localhost:8050/;
        }

  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
通过代理服务器来解决跨域问题,需要在前端调用代理服务器的接口,再由代理服务器向目标服务器发送请求,最后将目标服务器的响应返回给前端。具体步骤如下: 1. 在代理服务器上实现一个接口,接收前端发送的请求,包括请求的 URL、请求方法、请求头和请求体等信息。 2. 在代理服务器上使用 http 模块向目标服务器发送请求,将前端发送的请求信息转发给目标服务器。 3. 目标服务器接收请求并返回响应,代理服务器将目标服务器的响应返回给前端。 下面是一个 Node.js 代码示例: ```js const http = require('http'); const request = require('request'); const proxy = http.createServer((req, res) => { // 解析前端发送的请求信息 const options = { url: req.url, method: req.method, headers: req.headers, body: req.body }; // 向目标服务器发送请求 request(options, (error, response, body) => { if (error) { console.error(error); res.statusCode = 500; res.end('Internal Server Error'); } else { // 将目标服务器的响应返回给前端 res.statusCode = response.statusCode; res.headers = response.headers; res.end(body); } }); }); proxy.listen(8080, () => { console.log('Proxy server is running on port 8080'); }); ``` 在前端中,只需要将请求的 URL 修改为代理服务器的接口地址,即可实现跨域访问目标服务器。例如: ```js fetch('http://localhost:8080/api/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error)); ``` 上面的代码中,fetch 请求的 URL 修改为代理服务器的接口地址,代理服务器会将请求转发给目标服务器,并将目标服务器的响应返回给前端

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值