宝塔面板部署前后端分离项目(解决跨域问题)

这篇具有很好参考价值的文章主要介绍了宝塔面板部署前后端分离项目(解决跨域问题)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.打包前后端项目

注意的点

前后端的联调要改成前后端线上的地址
然后数据库相关的要改成线上的数据库
放开自己的防火墙 不要忘记了
宝塔面板和阿里云服务器(腾讯云服务器)都要打开

前端

改自己请求的地址 一定要改
image.png

打包

打开packaeg.json之后点build

image.png
打包之后会生成一个dist文件夹
随便找一个目录 将dist里面的文件放到下面去
但是要记住你放的目录是什么image.png

部署前端网站

点击添加站点
image.png

image.png

解决跨域

image.png

#请求中带上/api的都会被转发到我们的后端地址
location /api {
    add_header 'Access-Control-Allow-Origin' '*';
     #这里是你要代理的地址
    proxy_pass http://120.78.71.148:8080;
}
#加上这句防止我们的页面丢失
  if (!-e $request_filename) {

    rewrite  ^(.*)$ /index.html?s=/$1  last;

    break;

  }
后端
如何创建一个数据库image.png

导入数据表(可以利用navicat帮助我们导入数据)

配置redis(如果你的项目用到了的话)

image.png
如果没有下载的话 直接下载一个

redis配置

image.png

#bind 0.0.0.0
protected-mode no
requirepass yt
打包

image.png
将打包完成的代码放到一个目录下面
推荐放到下面这image.png
然后打开终端启动即可文章来源地址https://www.toymoban.com/news/detail-479882.html

到了这里,关于宝塔面板部署前后端分离项目(解决跨域问题)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 解决前后端分离架构中跨域问题

    前后端分离架构中,前端调用后端提供的API接口来获取数据。由于浏览器的 同源策略要求当前请求与目标请求的域名、协议、端口都要相同 ,而前端服务与后端服务往往会被部署到不同的机器,不同端口上,因此会产生跨域问题。 同源策略是由 Netscape 提出的一个著名的安全

    2023年04月09日
    浏览(28)
  • 前后端分离常见跨域问题及解决方法

    1、has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response. 原因:跨域的 allow_headers 没有设置authorization 解决方法 ,加个Authorization就可以 2、has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The value

    2024年02月01日
    浏览(28)
  • 解决前后端分离Vue项目部署到服务器后出现的302重定向问题

    最近发现自己开发的vue前后端分离项目因为使用了spring security 安全框架,即使在登录认证成功之后再调用一些正常的接口总是会莫名奇妙地出现302重定向的问题,导致接口数据出不来。奇怪的是这个问题在本地开发环境并没有,而是部署到了服务器之后才会有。 接口无法加

    2024年02月13日
    浏览(38)
  • SpringBoot解决前后端分离跨域问题:状态码403拒绝访问

    最近在写和同学一起做一个前后端分离的项目,今日开始对接口准备进行 登录注册 的时候发现前端在发起请求后,抓包发现后端返回了一个 403 的错误,解决了很久发现是【跨域问题】,第一次遇到,便作此记录✍ 在后端服务器启动后,前端页面也起了起来,然后点击这个

    2024年02月03日
    浏览(30)
  • 解决Spring Boot前后端分离开发模式中的跨域问题

    在实际开发中,经常会遇到前端Vue应用与后端Spring Boot API接口存在跨域访问的问题。本篇博客将分享解决Spring Boot前端Vue跨域问题的实战经验,帮助开发者快速解决该问题。 跨域问题是由于浏览器的同源策略引起的。同源策略限制了从一个源加载的文档或脚本如何与来自另一

    2024年02月10日
    浏览(31)
  • 宝塔部署项目&跨域

    导读:一般我们开发完前端项目后需要部署项目到线上服务器访问,这里是记录部署的一个过程。部署项目有多种方式:1.通过Nginx进行部署。2.通过Java进行部署(存放在static目录下)。3.通过PHP创建的的静态文件夹访问等等。 注意:如果你启动的服务有自定义端口,你需要在

    2024年02月06日
    浏览(36)
  • 宝塔面板部署express以及MySql项目

    第一次在宝塔面板上部署express和MySql项目,部署过程一直跑不通接口,特此记录一下。 在部署的时候,建议第一步把数据库MySql给跑通,中间好多原因是由于数据库的原因给引起的。 (1)在宝塔面板上数据库上点击添加数据库,按照下述图片填写数据库的名字,密码会自动

    2024年02月07日
    浏览(37)
  • 宝塔面板+阿里云部署springboot+vue项目

    码了一个多月的vue+springboot前后端分离项目基本上完工了,今天上线,详细记录了一下自己的部署过程,顺便记录一下遇到的坑。 在阿里云购买完服务器后,找到管理台中的实例 查看云服务器详情信息 有两个地址,一个是公网,一个是内网,我们部署项目用的公网。 刚购买

    2024年02月06日
    浏览(42)
  • 使用宝塔面板部署前端项目到服务器

    目录 文章目录 前言 一、第一步:创建文件夹 二、第二步:部署前端项目 三、第三步:打开防火墙 前言 第一步:创建文件夹 第二步:部署前端项目 第三步:打开防火墙 总结 在此之前,我们已经创建了宝塔面板账号、拥有了一台服务器。现在,我们想让我们的前端能够像

    2024年02月03日
    浏览(55)
  • 如何把vue项目部署服务器(宝塔面板)上

    首先我们把准备好的vue项目进行打包: 输入命令:npm run build    生成dist文件   二、进入宝塔管理界面,点击网站,然后点击添加站点  三。按下面输入  点设置 四。 输入好点添加,注意!!!test.com 可以,有些已经有的不可以(如dada.com),且前面不能加www  (1)这里需要

    2024年02月12日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包