Nginx笔记-使用Nginx给vue应用设置一个代理

最新推荐文章于 2024-04-21 08:39:16 发布
最新推荐文章于 2024-04-21 08:39:16 发布
阅读量4.3k 收藏 17
点赞数 22
分类专栏： Nginx 文章标签： WEB Nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq78442761/article/details/97634020
版权

目录

 

注意点

演示

 

注意点

首先是vue的修改，用脚手架搭建的vue只能是localhost进行访问。修改config下的index.js让其都能访问，修改host为0.0.0.0

第二个要注意的地方就是：

这个location / {

}

此处要设置为/如果设置其他的，可能会出现这样的问题，但只是原始的vue会这样，正式的开发是不会这样的，可以随意设置；

 

 

演示

设置好后运行截图如下：

IT1995
关注
专栏目录
nginx 部署前端项目的详细步骤（vue项目build打包+nginx部署）_前端工程打包部署到nginx
m0_61068496的博客
04-21 2561
以我的为例：server# http版本#̲ 继承地址，这里的http_upgrade为上面的proxy_pass# 传递的ip。
2021-11-03 vue笔记:反向代理介绍和使用场景,基于 vue-cli 的反向代理设置及 axios 获取 json 数据
GAARA
11-03 498
0.反向代理是什么? 1、正向代理(forward proxy) 2、反向代理(Reverse proxy) 1.为什么要配置反向代理? 2.如何实现vue中配置反向代理? 2.1.安装和引入axios 2.2.使用axios 2.3. 配置文件vue.config.js
nginx配置多个vue项目
09-30
主要介绍了nginx配置多个vue项目的方法以及流程介绍，对此有需要的朋友参考下。
vue项目nginx代理
qq_42289032的博客
01-07 456
vue项目nginx代理 项目放到阿里云服务器上 第一步 先把webpack配置的assetsPublicPath设置修改为’./’。 第二步 项目打包 第三步 网上下载nginx包安装 第四步 配置conf目录下的nginx.conf文件 第五步 在nginx目录启动cmd输入nginx,然后再访问地址http://localhost:8082/#/，over ...
Nginx如何代理一个Vue项目
青春沐谷的博客
03-27 6853
如何用Nginx代理一个Vue项目
使用Nginx代理和转发Websocket连接
aichang1358的博客
05-16 1484
1.Websocket 简介 WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。 2.Nginx 简介 Nginx是一个反向代理服务器，所有的来自浏览器的请求必须经过Nginx。 通常的正向代理服务器，只用于代理内部网络对Internet的连接请求，客户机必须指定代理服务器,并...
nginx 配置vue代理2种方式
xiaogg3678的专栏
03-02 9464
**方法一** 访问方式：http://域名 server { listen 8088; #端口号，自定义 server_name 域名; root 路径; index index.html; # Load configuration files for the default serve...
Django + Vue 部署服务器nginx + uwsgi_nginx部署django和vue项目
最新发布
m0_63174529的博客
04-21 1003
设置在平滑的重启（直到接收到的请求处理完才重启）一个工作子进程中，等待这个工作结束的最长秒数。指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？跟C,Java中的this有什么区别？跟C,Java中的this有什么区别？
CentOS7+Nginx搭建图片服务器
qq_34135615的博客
04-21 483
1 下载nginx压缩文件 地址：http://nginx.org/en/download.html 2 安装下载nginx依赖包 2.1 gcc安装 安装 nginx 需要先将官网下载的源码进行编译，编译依赖 gcc 环境，如果没有 gcc 环境，则需要安装： [root@nginx ~]# yum -y install gcc-c++ 2.2 pcre安装 PCRE(Perl Compatible Regular Expressions) 是一个Perl库，包括 perl 兼容的正则表达式库。ngi
vue proxy代理 + nginx 处理跨域
01-03
前言： 身为一名前端菜鸟，之前一直未关注后端对于跨域的配置，这不，终于又踩到坑了，由于nginx未配置代理转发，所以前端的处理一直都是针对开发环境和生产环境做处理 // 错误 的代理配置，同样启用proxy代理，并在axios配置文件中根据开发环境配置请求，这样在开发环境中可以正常请求，但是在生产环境中由于直接请求，浏览器会进行预请求OPTIONS http预请求options,这是浏览器对复杂跨域请求的一种处理方式,在真正发送请求之前,会先进行一次预请求,就是我们刚刚说到的参数为OPTIONS的第一次请求,他的作用是用于试探性的服务器响应是否正确,即是否能接受真正的请求,如果在options
nginx代理vue
zhanghe687的博客
07-28 393
nginx代理vue，解决sessionId不能带过去问题
Vue项目打包，使用nginx代理上线
Henry的博客
04-27 495
nginx反向代理，项目部署服务器
Nginx部署vue项目和配置代理
专注Java（全栈）应用开发，求知若渴，虚心若愚，talk is cheap, show me the code.
12-03 2906
网络爬虫的是一个非常常见的需求。首先在根目录下创建vue.config.js文件，这个配置文件会在运行项目的时候自动加载` 因为原来接口中不存在’/api’，我们人为加上去就是为了标识哪些接口需要实现代理，但是真正访问接口的时候还是要把接口uri中的‘/api’替换为‘’我们不仅可以为’/api’实现代理，也可以为其他具有同类功能的接口实现代理，比如我们的接口是发布在多个微服务中的，就需要我们设置多个代理地址，这时，就不能对axios设置统一的baseURL//axios.defaults.baseURL
nginx部署 vue配置代理服务器 解决跨域问题
qq_42058998的博客
08-22 1617
nginx部署 vue配置代理服务器 解决nginx代理服务器不奏效跨域问题
Vue的Nginx前端代理配置
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
08-20 1747
当用vue开发好前端需要打包时，一般都需要配置下代理方便访问后台接口，避免出现找不到链接或者跨域问题。 记录下配置，假如vue中配置的跟url是/mock-server ,实际接口地址是127.0.0.1:8886 则nginx.conf文件中，增加如下配置： location /mock-server { proxy_pass http://127.0.0.1:8886; #api请求地址的实际地址 rewrite ^.+mock-server/?(.*)$ /$1 break; #
Nginx反向代理Vue项目（代理项目地址和解决跨域）
tieniuya的博客
06-10 1527
正向代理 正向代理需要客户端特殊设置，才能访问到某个网站，例如google。 反向代理 反向代理是通过服务端设置，代理服务器用的，用户无感知。 开发vue项目时通过nginx反向代理访问文件地址和接口。 vue 服务端口 9527 /api/ 请求地址（跨域）http://test.com:8882/ 4399 nginx服务端口号（启动服务之后通过它来访问项目） 通过 http://localhost:4399 访问项目 vue项目中请求地址若为 /getUserInfo 写为 /api/get.
vue项目代理配置+使用nginx部署的请求代理配置
热门推荐
RenLJ1895的博客
01-13 1万+
由于vue项目的前后端分离，代码里的请求基本上都会涉及跨域，所以有必要在项目中配置代理地址。如果是使用nginx部署前端项目，而接口是运行在其他服务上的，那么nginx同样也需要配置代理，当然，如果前端项目跟接口是运行在同一个服务上，这种情况就只需要配置开发环境就行。 以下是使用nginx部署打包好的vue项目，而后端接口使用其他服务部署的vue配置以及nginx配置 开发环境 使用vue-cli2版本创建的vue项目 在 config/index.js 文件内配置以下代码 module.exports
nginx配置vue前端代理
Clearlove_8的博客
04-21 7445
背景：做一个前后端分离的项目，使用vue-cli创建的前端项目，在前端配置跨域请求。 一、开发阶段 在vue.config.js中配置devserver的proxy进行代理请求配置，然后将所有请求改为/api开头的即可。但是这样配置只在开发阶段起作用。所以在nginx上部署的时候，需要再重新配置请求代理。 vue.config.js中代码配置如下： // 相当于webpack-dev-server...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IT1995

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值