前后端项目部署和解决跨域

news2024/9/17 3:13:07

文章目录

  • 一.前端项目部署
    • 1.1 上传前端文件
    • 1.2 项目部署
    • 1.3 解决跨域
      • 1.3.1 什么是跨域
      • 1.3.2 配置文件
  • 二.后端项目部署
    • 2.1 上传后端文件
    • 2.2 项目部署
    • 2.3 解决跨域

一.前端项目部署

1.1 上传前端文件

站点创建好了,进入到站点的目录。

然后把它默认的文件删掉。

你会发现有个PHP项目删不掉,不用管它,那是它自己强制的一个设置。

然后直接把前端打包好的dist文件夹内的文件拖进去。

会弹出提示框,点击开始上传,全部上传成功就可以点击×,×掉它。

1.2 项目部署

添加站点,部署新项目。

  1. 域名。域名中删除之前的服务器公网IP地址,域名如果没有泛解析,输入域名www.###.com,如果进行了泛解析,输入泛解析域名。

泛解析

  1. 根目录。跟换为前端文件的根目录。

1.3 解决跨域

1.3.1 什么是跨域

什么是跨域?浏览器为了用户的安全,仅允许向同域名、同端口的服务器发送请求。

前端的域名和后端域名不一样,域名不一样就出现了跨域,跨域的话就报错了。

我们可以看一下网络请求。

为了防止跨域,或者说为了检测跨域,浏览器它会在发送正式请求之前,发送一个预检请求,预检的请求方法是OPTIONS。
预检请求经常用来检查是否跨域,或者换一句话说,当我们请求的域名是和当前网页域名不同的时候,它就会发送预检请求。

预检请求的作用:就是提前探路,比如说你要坐飞机,预检请求提前查一下你这个飞机航班有没有晚点,是不是正常运行的,如果不是正常运行的,那也不用发下一个请求了,或者说下一个请求直接拒绝掉。

1.3.2 配置文件

  1. 在nginx配置跨域,点击设置。
  2. 把之前配置的反向代理删除。
  3. 在nginx配置文件的http->server->location中添加以下代码
location / {
try_files $uri $uri/ /index.html;
}

在前端的nginx中加入上面那个location配置。

二.后端项目部署

2.1 上传后端文件

在wwwroot目录下新建一个后端文件夹。

进入到这个目录中,把之前后端打包好的jar包,上传上去。

2.2 项目部署

添加JAVA项目,部署新项目。

  1. 项目jar路径。更改为jar的文件路径。
  2. 项目执行命令。
  3. 然后先把tomcat停掉,不然用不了8080端口(装tomcat只是为了装java)。
  4. 对上面的设置根据需要进行更改。
  5. 去防火墙把8080端口放行。

只有项目执行命令正确,java项目才会运行。

2.3 解决跨域

  1. 在nginx配置跨域,点击设置。
  2. 把之前配置的反向代理删除。
  3. 配置文件。


location ^~ /api/ {
    proxy_pass http://127.0.0.1:8080/api/;
    add_header 'Access-Control-Allow-Origin' $http_origin;
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers '*';
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Origin' $http_origin;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
    }
}



本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1703145.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

心电信号降噪方法(滤波器/移动平均/小波等,MATLAB环境)

对于一个正常的、完整的心动周期,对应的心电图波形如下图所示,各个波形都对应着心脏兴奋活动的生理过程,包含P波,PR段,QRS波群,ST段,T波,U波。 (1)P波心电图中…

PG实践|PostgreSQL的安装和配置

📫 作者简介:「六月暴雪飞梨花」,专注于研究Java,就职于科技型公司后端工程师 🏆 近期荣誉:华为云云享专家、阿里云专家博主、腾讯云优秀创作者、ACDU成员 🔥 三连支持:欢迎 ❤️关注…

【Java面试】五、MySQL篇(下)

文章目录 1、事务的特性2、并发事务问题3、事务的隔离级别4、undo log 和 redo log4.1 底层结构4.2 redo log4.3 undo log 5、MVCC5.1 隐式字段5.2 undo log 版本链5.3 ReadView5.4 ReadView的匹配规则实现事务隔离 6、MySQL的主从同步原理7、分库分表7.1 垂直分库7.2 垂直分表…

[NISACTF 2022]easyssrf、[NISACTF 2022]level-up

[NISACTF 2022]easyssrf 使用dirsearch扫描后没发现什么路径 尝试访问127.0.0.1,成功了 访问127.0.0.1/flag.php提示有文件/fl4g 使用file://协议读取文件/fl4g,提示除此页面外还有一个ha1x1ux1u.php页面。 file:///fl4g 直接访问,发现GET…

C++240527

定义自己的命名空间 my_sapce&#xff0c;在 my_sapce 中定义 string 类型的变量 s1&#xff0c;再 定义一个函数 完成 对字符串的逆置 。 #include <iostream>//导入 标准命名空间&#xff0c;cout 和 endl 标识符 存在于标准命名空间中 using namespace std;//定义了自…

C++ 函数模板与模板函数

一 代码重用技术 函数 类与对象 继承与派生 多态&#xff08;函数重载、运算符重载、虚函数、纯虚函数与抽象类&#xff09; 泛型程序设计 通用的代码需要补受数据类型的影响&#xff0c;并且可以自动适应数据类型的变化&#xff0c;这种程序设计类型称为泛型程序设计。 二 模…

特殊矩阵的压缩矩阵

目录 前提条件&#xff1a; 类型&#xff1a;对称矩阵&#xff0c;三角矩阵、三对角矩阵、稀疏矩阵 1&#xff1a;对称矩阵&#xff1a; 定义&#xff1a;n阶矩阵A 中任意一元素都有ai,jaj,i(1<i,j<n) 图像&#xff1a; 表达式&#xff1a; 计算过程&#xff1a; …

类 和 对象(二)

构造方法 接上篇&#xff0c;若每次都想下面的setDate方法给对象初始化&#xff0c;未免比较麻烦&#xff0c;那有什么方法可以让初始化更加简便呢&#xff1f; public void setDate(int year, int month, int day){this.year year;this.month month;this.day day;}答&#…

服务器端口号,如何避免与公共端口冲突

首先&#xff0c;我们需要明确什么是服务器端口号。服务器端口号是计算机操作系统分配给网络应用程序的一个数字标识&#xff0c;用于区分不同的网络服务。每个网络服务都需要一个唯一的端口号来进行标识&#xff0c;以便在通信过程中能够准确找到对应的服务。 为了避免与公共端…

恒创科技:Linux 服务器和 Windows 服务器哪个更好?

选择正确的服务器系统至关重要&#xff0c;目前广泛使用的选项是 Windows 服务器 和 Linux 服务器&#xff0c;它们各有优缺点。本文将比较 Linux 与 Windows 服务器&#xff0c;让我们来看看它们的主要区别&#xff0c;然后再决定哪种操作系统适合使用。 主要区别&#xff1a;…

Windows下mingw32编译ffmpeg5.1.4实现rtsp拉流

由于客户要求&#xff0c;要在Windows下使用mingw32编译&#xff0c;去ffmpeg.org下载需要编译的版本&#xff0c;使用msys2方法进行编译&#xff0c;使用QT5.10的编译器&#xff0c;基本上把网上的方法试了个遍&#xff0c;编译全部库总是报错出问题 查看了ffbuild文件夹中con…

Mac 电脑给android手机传输文件提示 No android device found

在开发过程中&#xff0c;我们有时候会有在电脑和手机之间传输文件的需求。 Mac电脑给android手机传输文件并不是很方便。 Google 官方提供了一个软件叫Android File Transfer&#xff0c;这个软件免费且好用。 Android File Transfer下载地址 但是使用过程中会遇到一些问题…

Android:使用Kotlin搭建MVI架构模式

一、简介MVI架构模式 M&#xff1a;Model 数据层&#xff0c;包含应用数据和业务逻辑V&#xff1a;View 界面层&#xff0c;在屏幕上显示应用数据&#xff0c;包含与界面相关的状态和界面逻辑&#xff0c;根据界面状态对象更新UI&#xff0c;界面状态定义是不可变的。这样的主要…

完全背包+背包装满 总结

目录 1.背包恰好装满 &#xff08;1&#xff09;问题是什么 &#xff08;2&#xff09;问题的有效状态和无效状态 &#xff08;3&#xff09;问题的常考形式&#xff0c;以及如何去处理 1.值的大小 2.组合个数 3.排列个数 2.例题 A. Cut Ribbon HDU1114 Piggy-Bank …

OpenHarmony实战开发——网络组件axios可以在OpenHarmony上使用了

什么是axios 上古浏览器页面在向服务器请求数据时&#xff0c;因为返回的是整个页面的数据&#xff0c;页面都会强制刷新一下&#xff0c;这对于用户来讲并不是很友好。并且我们只是需要修改页面的部分数据&#xff0c;但是从服务器端发送的却是整个页面的数据&#xff0c;十分…

C++: 二叉搜索树及实现

目录 一、二叉搜索树的概念 二、二叉搜索树的操作 2.1插入 2.2删除 1.有左子树&#xff0c;无右子树 2.有右子树&#xff0c;无左子树 3.有左子树和右子树 三、二叉搜索树的实现 要点 前言&#xff1a;为了学习map和set&#xff0c;需要先学二叉搜索树作为铺垫。 一、…

计算机毕业设计 | SpringBoot招投标系统 任务发布网站(附源码)

1&#xff0c;绪论 在市场范围内&#xff0c;任务发布网站很受欢迎&#xff0c;有很多开发者以及其他领域的牛人&#xff0c;更倾向于选择工作时间、工作场景更自由的零工市场寻求零散单子来补贴家用。 如今市场上&#xff0c;任务发布网站鱼龙混杂&#xff0c;用户需要找一个…

AIGC 008-IP-Adapter文本兼容图像提示适配器用于文本到图像扩散模型

AIGC 008-IP-Adapter文本兼容图像提示适配器用于文本到图像扩散模型&#xff01; 文章目录 0 论文工作1 论文方法2 效果 0 论文工作 这篇论文介绍了 IP-Adapter&#xff0c;一种 高效地将预训练的图像到图像转换模型适应到新领域 的方法。它通过在预训练模型的 输入端 添加一个…

Python考试复习--day2

1.出租车计费 mile,waitmap(int,input().split(,)) if mile<3:money13wait*1 elif mile>3 and mile<15:money13(mile-3)*2.3wait*1 else:money1312*2.3(mile-15)*2.3*(10.5)wait*1 print({:.0f}.format(money)) 【知识点1】&#xff1a; map() 函数 【知识点1】&…

数字水印 | 离散余弦变换 DCT 基本原理及 Python 代码实现

目录 1 基本原理2 代码实现3 图像压缩 1 基本原理 参考博客&#xff1a;https://www.cnblogs.com/zxporz/p/16072580.html D C T \mathsf{DCT} DCT 全称为 D i s c r e t e C o s i n e T r a n s f o r m \mathsf{Discrete\ Cosine\ Transform} Discrete Cosine Transfo…