前言

  • 有时候我们打包好vue项目让后端人员部署项目时可能会有小插曲,为了不麻烦后端人员和避免尴尬,最好的办法就是在本地自己先测一下,而在本地运行打包后的项目会遇到接口跨域的问题。我平时经常用的方法就是配置nginx设置反向代理解决跨域问题。

准备过程

  • 安装nginx,具体怎么安装部署可以参考 传送门
  • 准备打包后的vue项目

配置nginx

  • 编辑nginx.conf 配置文件



  • 在配置文件中新增一个server
#新增一个服务
server {
listen 8088; # 监听的端口
server_name localhost; location / {
root D://Thello/Project/kcgl; # vue 打包后静态文件存放的地址 如果/后面是t开头则要加多一个'/'
index index.html; # 默认主页地址
} location /kc {
proxy_pass http://ip地址/kc; # 代理接口地址(此处ip地址根据自己情况更换)
}
}

启动nginx

有两种方法启动nginx

  1. 双击目录下的nginx.exe

  2. 命令行进入该文件夹,执行start nginx命令,也会直接启动nginx服务器

启动后会出现一个小的黑色屏幕然后马上关闭

验证

输入在http://localhost会出现以下页面,表示已经访问成功!

改为上方自己设置的端口号



项目就已经运行起来了!!就可以愉快的测试了。

更多的nginx指令

启动服务:start nginx

退出服务:nginx -s quit

强制关闭服务:nginx -s stop

重载服务:nginx -s reload  (重启,服务不会中止)

验证配置文件:nginx -t

使用配置文件:nginx -c

使用帮助:nginx -h

在操作中如果发现运行不了nginx则先通过命令行终止再打开即可

vue项目打包本地后通过nginx解决跨域的更多相关文章

  1. vue项目开发,用webpack配置解决跨域问题

    今天在本地开发时候碰到了跨域的问题,突然觉着跨域问题在所难免啊,之前没有没有碰到总觉着解决跨域很高大上的样纸,其实就是受限于网络的同源策略,跨域前后端都可以进行处理. 1,后端更改header hea ...

  2. 【手摸手,带你搭建前后端分离商城系统】02 VUE-CLI 脚手架生成基本项目,axios配置请求、解决跨域问题

    [手摸手,带你搭建前后端分离商城系统]02 VUE-CLI 脚手架生成基本项目,axios配置请求.解决跨域问题. 回顾一下上一节我们学习到的内容.已经将一个 usm_admin 后台用户 表的基本增 ...

  3. 无需CORS,用nginx解决跨域问题,轻松实现低代码开发的前后端分离

    近年来,前后端分离已经成为中大型软件项目开发的最佳实践. 在技术层面,前后端分离指在同一个Web系统中,前端服务器和后端服务器采用不同的技术栈,利用标准的WebAPI完成协同工作.这种前后端分离的&q ...

  4. nginx解决跨域(前后端分离)

    Nginx解决跨域问题 后端接口 请求地址 返回数据(json数据) http://127.0.0.1:8080//app Hello World! 前端代码 通过nginx做静态资源服务器访问端口8 ...

  5. 如何用Nginx解决跨域问题

    一. 产生跨域的原因 1.浏览器限制 2.跨域 3.XHR(XMLHttpRequest)请求 二. 解决思路 解决跨域有多重,在这里主要讲用nginx解决跨域 1.JSONP 2.nginx代理 3 ...

  6. Vue项目打包发布后CSS中的背景图片不显示

    相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...

  7. 前端如何使用proxyTable和nginx解决跨域问题

    最近经常遇到跨域的问题,有时候问题虽然解决了,但是还是会有些模棱两可概念不清,于是在网上看了一些教程结合实际使用,做个笔记. 1.跨域原因 浏览器的限制 跨域(协议/域名/端口的不同) XMLHttp ...

  8. 利用nginx解决跨域问题

    访问我的博客 前言 最近遇到了跨域问题,结合之前[微信支付开发本地接收异步通知回调]的经验,利用 Nginx 实现了跨域. 公司之前为了解决跨域问题,用的是 iFrame,反正对于只做后端的我而言,觉 ...

  9. vue开发环境和生产环境里面解决跨域的几种方法

    什么是跨域   跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据.源指协议,端口,域名.只要这个3个中有一个不同就是跨域. 这里列举一个经典的列子: #协议跨域 http://a.baidu. ...

随机推荐

  1. Vue学习笔记-vue-element-admin 按装报错再按装

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

  2. springcloud alibaba-nacos配置中心

    nacos除了充当注册中心外,还能作为配置中心,下面进行演示. 1. 创建 模块,用于读取 nacos配置中心的统一配置 2. 添加依赖 <dependencies> <!-- na ...

  3. 后端程序员之路 21、一个cgi的c++封装

    在"3.fastcgi.fastcgi++"中,我们了解了cgi,也尝试了fastcgi++,这里,再记录一种对fastcgi的封装. 1.cgi接口层    request_t ...

  4. 【DB宝42】MySQL高可用架构MHA+ProxySQL实现读写分离和负载均衡

    目录 一.MHA+ProxySQL架构 二.快速搭建MHA环境 2.1 下载MHA镜像 2.2 编辑yml文件,创建MHA相关容器 2.3 安装docker-compose软件(若已安装,可忽略) 2 ...

  5. SQL注入绕过waf的一万种姿势

      绕过waf分类: 白盒绕过: 针对代码审计,有的waf采用代码的方式,编写过滤函数,如下blacklist()函数所示: 1 ........ 2 3 $id=$_GET['id']; 4 5 $ ...

  6. OpenCV 之 角点检测

    角点 (corners) 的定义有两个版本:一是 两条边缘的交点,二是 邻域内具有两个主方向的特征点. 一般而言,角点是边缘曲线上曲率为极大值的点,或者 图像亮度发生剧烈变化的点.例如,从人眼角度来看 ...

  7. 【odoo】ref 1-6说明

    (0,_ ,{'field': value}) 这将创建一个新的记录并连接它          (1,id,{'field': value}): 这是更新一个已经连接了的记录的值          ( ...

  8. 2019 GDUT Rating Contest I : Problem A. The Bucket List

    题面: A. The Bucket List Input file: standard input Output file: standard output Time limit: 1 second Me ...

  9. 颠覆你认知的Python3.9

    我通读了python 3.9发行说明和相关的讨论.根据这些信息,我想写一个全面的指南,以便每个人都能一眼了解这些功能及其详细的工作原理 原文地址,点击这里,观看效果更佳 简而言之 从字典更新/合并到添 ...

  10. Mybatis中由于${}直接注入引发的问题

    一.问题引入 我们先来看这段代码,我想从取值为${category}的表中查询全部信息. @Mapper public interface CategoryMapper { @Select(" ...