nginx-springboot-vue前后端分离跨域配置

引言

接着上篇——简单的springboot-vue前后端分离登录Session拦截的demo,其中跨域是通过springboot后端全局设置的,但是碰到了奇怪的问题,用了个不优雅的方式解决。

于是想到使用Nginx跨域应该就不会如此了。

windows下载安装

http://nginx.org/ 下载稳定版,解压缩。

查看配置文件 /nginx-1.16.0/conf/nginx.conf :

#gzip  on;

    server {
listen 80;
server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / {
root html;
index index.html index.htm;
} #error_page 404 /404.html;

默认监听端口是80,/是相对路径下的html目录。

  • windows下查看一个端口占用情况netstat -ano|findstr 3306

    输出:

    TCP 0.0.0.0:3306 0.0.0.0:0 LISTENING 3448

    TCP [::]:3306 [::]:0 LISTENING 3448
  • 查看占用此端口的是哪个进程tasklist|findstr 3448

    输出:

    mysqld.exe 3448 Services 0 163,952 K
  • 根据PID杀掉进程(强行)taskkill /pid #{pid} /F

    (当然可以打开任务管理器直接干掉)
  • 根据关键字查询目标进程tasklist|findstr mysql

确定端口没被占用后,默认的80端口先跑起来。

  • 进入安装目录dos输入 start nginx,一闪而过正常,不要使用双击exe方式
  • 查看验证 nginx 80 端口情况 tasklist|findstr nginx
  • 确定无误,浏览器键入 localhost:80 显示 Nginx 欢迎页,OK

打包部署 vue-cli 项目

修改默认80端口为自定义端口8081

  • /conf/nginx.conf 的 server.listen 80 >> 8081
  • 重载配置重启:nginx.exe -s reload

nginx常用命令(windows-dos环境加.exe后缀,比如 nginx.exe -t)

(cd 到安装跟目录执行命令,比如 xxx/nginx-1.16.0/)

start nginx 启动
nginx -v 查看Nginx的版本号
nginx -t 检查配置文件的有效性
nginx -s 立即关闭
nginx -s quit 处理完当前的请求后关闭
nginx -s reload 修改完配置文件后重载
nginx -s reopen 打开日志文件

打包部署vue-cli项目

  • 进入vue项目根目录执行 cnpm run build
  • 将生成的 dist 目录放置 nginx 根目录下的 html 目录下(/nginx-1.16.0/html/dist)
  • 修改nginx配置文件中的location
location / {
root html/dist;
index index.html index.htm;
}
  • 验证配置nginx.exe -t,重载配置nginx.exe -s reload
  • 刷新8081页面

Nginx跨域配置

  • 未使用Nginx之前,Java后端跨域

    springboot后端配置全局跨域,允许这个8081的请求跨域,这样优点是任何接口调用方的前端代码和nginx配置不用变化,但前提是后端是我自己开发的 XD..
  • 开始尝试Nginx的跨域配置

    注掉springboot的全局跨域配置,取消vue中axios.defaults.baseURL,baseURL的作用也交给Nginx的proxy_pass。
  • 完整配置demo初版(已测)
#user  nobody;
# 启动多worker进程
#worker_processes 1;
worker_processes auto; #error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info; #pid logs/nginx.pid; events {
worker_connections 1024;
} http {
include mime.types;
default_type application/octet-stream; log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.log main; sendfile on;
#tcp_nopush on; #keepalive_timeout 0;
keepalive_timeout 65; # 启用gzip压缩
gzip on;
#gzip on; server {
# nginx服务器对外8081端口
listen 8081;
server_name localhost; #charset koi8-r; # 日志输出
access_log logs/myvue.access.log main;
#access_log logs/host.access.log main; # 静态文件配置
location / {
root html/dist;
index index.html index.htm;
} #error_page 404 /404.html; # redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
} # 反向代理springboot接口服务
location /api/ {
# 前端请求: /api/login 代理后: http://127.0.0.1:8080/login
proxy_pass http://127.0.0.1:8080/;
# 解决springboot中获取远程ip的问题
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_http_version 1.1;
proxy_set_header Connection "";
} # proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}

心得

  • 3种解决跨域的方式

    • 直接使用vue的跨域设置(proxyTable,开发环境本地调试用)
    • 使用Nginx代理配置(即本文 proxy_pass,开发到上线)
    • springboot后端配置跨域(addCorsMappings 一劳永逸,前端无关性)
  • 如果后端是也自己开发的话,直接后端(如 springboot)配置跨域是很方便的
  • 开发时使用vue的跨域设置,上线时则使用Nginx的配置(一般会用到集群配置),这样的搭配也很nice

碰到的问题

  • Windows-dos下使用 nginx -s stop; nginx -s reload 等喜闻乐见命令时,报找不到命令。

上面通用的是Linux环境的,windows-dos下使用这种 nginx.exe -s stop

可以继续折腾的主题(链接坑待填)

  • Nginx配置文件服务器(上传下载)
  • Nginx集群(负载均衡)配置与Session问题

nginx-springboot-vue前后端分离跨域配置的更多相关文章

  1. Nginx+Springboot+Vue 前后端分离 解决跨域问题

    1:前端vue 写完 打包 npm run build prod 2: 后端api 写完打包 springboot mvn package -Dmaven.test.skip=true 3: ngin ...

  2. springboot vue前后端分离 跨跨域配置

    public class CustomCorsFilter extends OncePerRequestFilter { @Override protected void doFilterIntern ...

  3. SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题

    原文链接:https://segmentfault.com/a/1190000012879279 当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异.笔者前几天刚好在负责一个项目的权限管理 ...

  4. Springboot+vue前后端分离项目,poi导出excel提供用户下载的解决方案

    因为我们做的是前后端分离项目 无法采用response.write直接将文件流写出 我们采用阿里云oss 进行保存 再返回的结果对象里面保存我们的文件地址 废话不多说,上代码 Springboot 第 ...

  5. nginx反向代理实现前后端分离&跨域问题

    1.代理和跨域 1.1 正向代理 1)用户希望代理服务器帮助其和要访问服务器之间实现通信,需要: a.用户IP报文的目的IP=代理服务器IP: b.用户报文端口号=代理服务器监听端口号: c.HTTP ...

  6. 前后端分离跨域 关于前后端分离开发环境下的跨域访问问题(angular proxy=>nginx )

    前后端分离后遇到了跨域访问的问题: angular1中使用proxy很麻烦,最后还是失败结束:最后总结3种方法如下: 本人使用的第一种方法,只是开发环境下使用很方便! 1:禁掉谷歌的安全策略(Turn ...

  7. SpringBoot,Vue前后端分离开发首秀

    需求:读取数据库的数据展现到前端页面 技术栈:后端有主要有SpringBoot,lombok,SpringData JPA,Swagger,跨域,前端有Vue和axios 不了解这些技术的可以去入门一 ...

  8. SpringBoot +Vue 前后端分离实例

    今天下了Vue,想试一试前后端分离的实现,没想到坑还不少,这里就记录一下我遇到的坑和我的代码: 一.Vue的下载安装:从网上找就好了,没什么问题,除了下载以后,要把镜像库改成淘宝的,要不然太慢了. 二 ...

  9. Django前后端分离跨域请求问题

    一.问题背景 之前使用django+vue进行前后端分离碰到跨域请求问题,跨域(域名或者端口不同)请求问题的本质是由于浏览器的同源策略导致的,当请求的响应不是处于同一个域名和端口下,浏览器不会接受响应 ...

随机推荐

  1. 2019前端面试系列——JS面试题

    判断 js 类型的方式 1. typeof 可以判断出'string','number','boolean','undefined','symbol' 但判断 typeof(null) 时值为 'ob ...

  2. HTTP_3_HTTP报文

    用户HTTP协议交互的信息被称为HTTP报文 简单的请求报文和响应报文实例 HTTP传输过程中常用设置 提升传输速率 编码压缩传输 (常见压缩格式:gzip compress deflate ) 分块 ...

  3. Lombok 使用介绍(常见注解)

    目录 @Data @NonNull @Getter & @Setter @ToString @EqualsAndHashCode @NoArgsConstructor, @RequiredAr ...

  4. PID算法通俗理解,平衡车,倒立摆,适合不理解PID算法的人来看!

    先插句广告,本人QQ522414928,不熟悉PID算法的可以一起交流学习,随时在线(PID资料再我的另一篇博客里) 倒立摆资料连接↓ https://www.cnblogs.com/LiuXinyu ...

  5. ipad pro 为什么不行

    TalkingData公布的数据显示,iPad Pro在中国发行首月的销量仅为49 300台,而此前iPad Air 2发行首月后销量曾高达55.7万台.那么到底是什么原因,让这个被寄予厚望的iPad ...

  6. ipv6的连接

    基础知识不说了,网上一大堆! 基本内容不说了,写字太累了! 只说三点细节,记住就行: 1.ff开头的是多播地址,只能用于udp多播 2.fe80开头的是本地link地址,不管ping也好,connec ...

  7. ajax定义与开发最简五步骤

    ajax是什么? a (async异步)  j (javascript)  a (and)  x (xml)即异步的javascript和xml ajax特点:异步 不刷新整个页面 (局部刷新) we ...

  8. 深入浅出Apriori关联分析算法(一)

    在美国有这样一家奇怪的超市,它将啤酒与尿布这样两个奇怪的东西放在一起进行销售,并且最终让啤酒与尿布这两个看起来没有关联的东西的销量双双增加.这家超市的名字叫做沃尔玛. 你会不会觉得有些不可思议?虽然事 ...

  9. Consul的反熵

    熵 熵是衡量某个体系中事物混乱程度的一个指标,是从热力学第二定律借鉴过来的. 熵增原理 孤立系统的熵永不自动减少,熵在可逆过程中不变,在不可逆过程中增加.熵增加原理是热力学第二定律的又一种表述,它更为 ...

  10. LeetCode_62_不同路径

    /** * @author jianw.li * @date 2019/1/22 11:11 PM * @Description: 不同路径 * 一个机器人位于一个 m x n 网格的左上角 (起始点 ...