Macbook使用nginx与后端项目链接——前后端联调

已于 2023-12-21 09:33:31 修改
阅读量268 收藏 5
点赞数 2
文章标签： nginx idea
于 2023-12-21 09:32:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73331690/article/details/135122511
版权

在学习苍穹外卖项目时，下载nginx并在nginx.conf文件中配置好前端项目后，点击登陆发现没有反应，原来是没有进行Nginx反向代理。

1.首先打开打开nginx安装目录，将我们的前端项目移入到其中的html文件下

mac通常路径为

2.然后打开nginx.conf文件，通常路径为

找到其中的nginx.conf文件

第一个箭头处可以修改自己想要的端口号，第二个箭头处则输入在第一步中我们移入html文件夹中的前端文件名。

3.进行nginx反向代理

加入此串代码，其中端口号与后端项目端口号保持一致。

配置完保存后，使用以下指令重启nginx

sudo nginx -s reload

然后启动后端项目，重新点击登陆，即可进入

去外面走走看看
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Mac 安装Nginx详细教程
2301_77498991的博客
05-10 4459
本文介绍一下，如何在Mac系统中安装Nginx，把详细过程记录下来，方便以后查看，也方便大家学习。
使用springboot 前后端联调的一个前端代码
08-21
在开发Web应用时，...总之，前后端联调涉及Spring Boot后端服务的API设计、前端应用的请求处理，以及可能的网络配置（如使用ngrok或Nginx）。确保所有组件协同工作，是构建一个完整、功能完善的Web应用的关键步骤。
mac下安装nginx并且利用nginx解决本地前端工程访问后端接口跨域问题
weixin_30485379的博客
10-20 489
安装nginx 环境：macos mac环境下是使用的brew安装nginx 1.终端输入 brew search nginx 查找nginx 2.安装指令brew install nginx 安装完成后会在终端中看到一些nginx的安装信息 3.配置nginx 3.1 终端下进入目录 cd /usr/local/ 3.2 打开nginx配置文件所在目录 open nginx/ ...
Mac下安装Nginx及使用
传播是知识存在的意义
06-20 5908
Mac下安装 Nginx以及基本使用与配置
Mac下Nginx 部署、配置
最新发布
weixin_39444349的博客
03-11 1023
Nginx（发音为"engine-x"）是一个高性能的开源Web服务器，也可以作为反向代理服务器、负载均衡器、HTTP缓存和动态内容的加速器。它最初是由俄罗斯的程序员Igor Sysoev创建的，于2004年首次公开发布。：Nginx以其出色的性能而闻名，它能够处理大量并发连接而不消耗太多系统资源。：Nginx经过广泛的实际使用和测试，被证明是非常可靠的，可以持续稳定地运行，即使在高负载下也是如此。：Nginx采用事件驱动的架构，能够高效地处理大量的并发连接，而无需为每个连接创建新的线程或进程。
mac上安装Nginx简单详细教程
zhengcaocao的博客
09-20 9529
mac上安装nginx的简单教程
用MacBook实操:docker本地部署mysql+php+nginx坏境
happy921212的博客
05-08 3686
用macbook,带大家实操用docker部署mysql+php+nginx环境。之前的，欢迎阅读。之前的是服务器上配置环境，现在在mac本地搭建全栈开发环境。本文环境：时间：2023年mac：MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports) 版本11.6处理器：2.3 GHz 四核Intel Core i7mysql：5.6php：7.2.34……
Nginx代理同域名前后端分离项目的完整步骤
01-08
前后端分离项目，前后端共用一个域名。通过域名后的 url 前缀来区别前后端项目。 以 vue + php 项目为例。直接上 server 模块的 nginx 配置。 server { listen 80; #listen [::]:80 default_server ipv6only=on;...
Tomcat+Nginx反向代理部署前后端分离项目解决跨域问题
02-24
最近自己做了一个前后端分离项目，前端采用HBuilderX开发，后端采用IDEA开发，在本地开发也跨域，部署到云服务器也跨域，下面介绍两种解决方案。出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定...
nginx+vue.js实现前后端分离的示例代码
11-30
1.nginx 是一个高性能的HTTP和反向代理服务器，常用于分布式服务器管理. 它常用于做负载均衡(通过调用多台服务器达到此目的) 静态资源输出更快，可以对资源实现gzip压缩后输出(这也是本文为什么用它做静态资源访问的...
【Mac】NGINX快速安装教程与使用教程（适合m1/m2）
学无止境
11-23 2457
安装命令 brew install nginx ➜ ~ brew install nginx Error: The following directories are not writable by your user: /usr/local/include /usr/local/lib /usr/local/lib/pkgconfig /usr/local/share /usr/local/share/doc /usr/local/share/man /usr/local/share/man/man1
Nginx安装和使用（Mac版本）
努力的nana
01-03 485
mac安装nginx
mac电脑（os x系统）多网段设置
Kinsity的专栏
10-08 9898
需要经常访问不同网段网络的朋友在window系统下，很容易通过在ip设置的“高级设置”选项中添加网段，就可以轻松访问不同网段的网络（如果没有设置过可以问下度娘），但转到使用Mac（os x系统）电脑时就不知道怎么设置了。
MacBook的nginx出现13: Permission denied 的问题分析和解决办法
浮尘笔记
02-19 822
说明是nginx没有权限访问这个CSS文件，查看了文件权限没问题，那么需要从nginx配置方面排查原因。原因在于，如果省略了group，nginx会认为组名和用户名一样。更换了电脑，发现网站的样式都没有了，直接访问CSS文件。然后重启nginx即可。
如何实现Nginx本地搭载，及前后端交互。
weixin_56348428的博客
04-22 2808
1、本地环境准备 1、下载Nginx，安装到本地。具体安装可参考百度。下载地址nginx： 下载； 安装到本地，打开具体文件如下图。 2、前端工作 1、需要前端人员将前端代码文件压缩后给后端开发人员。一般打包的前端文件命名是dist。 2、解压dist文件到本地。可以现在本地建好前端web文件夹。如何前端文件有多个可以根据实际需求建多个文件夹。如图实例。在D盘下建manage_web文件夹，又在下面建两个子文件夹。 将解压好的dist文件放在其中一个文件夹中。解压后具体文件如下。 3.
MacBook安装Nginx
yinjl123456的博客
01-30 506
MacBook安装Nginx brew search nginx //搜索软件 查询要安装的软件是否存在 brew install nginx 安装nginx brew uninstall nginx 卸载nginx brew services start nginx 启动nginx服务 brew services stop nginx 关闭nginx服务 brew info nginx 查看安装信息(经常用到, 比如查看安装目录等) brew list 查看已经安装的软件 brew u
Nginx前后端分离配置实践-微服务模式
热门推荐
纸上得来终觉浅，绝知此事要躬行
06-27 1万+
Nginx前后端分离配置实践：本文主要记录前端通过Nginx与后端实现交互的配置。通过Nginx对外提供反向访问前端页面和后台接口，只需要在Nginx作简单的配置就可以对外发布应用服务（后端分模块开发，分别按照规范提供不同的业务接口-授权登录统一即可，实际上就是提供微服务）。同一个Nginx可以实现多个平台的服务配置，也就实现了微服务模式。
Nginx反向代理解决前后端联调跨域问题
weixin_34233679的博客
07-15 490
keywords： Nginx反向代理 前后端联调 跨域 1.什么是跨域 跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。 所谓同源是指，域名，协议，端口都相同。浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。 2....
windows本地使用Nginx反向代理解决前后端联调的跨域访问
焚心似火
12-14 4601
第一种使用Nginx 首先在服务端所在的电脑安装Windows版本的Nginx http://nginx.org/en/download.html （只能在本地搭建Nginx服务器，云服务器搭建不可以访问本地，本地没有外网地址，百度输入ip地址显示的本机我这里也不行  所以 像我这种本机启动项目，腾讯云服务器配置Nginx反向代理没卵用，没有外网地址，不过反向代理到百度还可
nginx部署后端项目
07-27
你可以按照以下步骤来部署后端项目到 Nginx 上： 1. 安装 Nginx：首先，确保你的服务器上已经安装了 Nginx。你可以根据你的操作系统的不同，使用相应的包管理器来安装。 2. 配置 Nginx：打开 Nginx 的配置文件，通常位于 `/etc/nginx/nginx.conf` 或者 `/etc/nginx/conf.d/default.conf`。在 `http` 部分添加一个新的 server 块，用于配置你的后端项目。 例如，假设你的后端项目运行在本地的 8000 端口上，你可以添加以下配置： ``` server { listen 80; server_name example.com; # 将 example.com 替换为你的域名或 IP 地址 location / { proxy_pass http://localhost:8000; # 将 localhost:8000 替换为你的后端项目地址 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } ``` 保存并关闭配置文件。 3. 测试配置文件：为了确保配置文件没有错误，你可以使用以下命令来测试： ``` nginx -t ``` 如果没有错误提示，说明配置文件正确。 4. 启动 Nginx：使用以下命令启动 Nginx 服务： ``` service nginx start ``` 或者 ``` systemctl start nginx ``` 确保没有错误提示。 5. 访问后端项目：现在，你可以通过在浏览器中输入你的域名或 IP 地址来访问你的后端项目了。 注意：上述配置仅仅是一个简单的示例，你可能需要根据你的具体需求进行修改。另外，如果你的后端项目是运行在其他服务器上，你需要将 `proxy_pass` 中的地址修改为正确的后端项目地址。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值