文档章节

nginx解决vuejs与springboot跨域问题

亚林瓜子
 亚林瓜子
发布于 2018/12/24 09:47
字数 480
阅读 472
收藏 18

问题

在实施前后端分离的时候,vuejs与springboot通常不在同一台服务器,这个时候,vuejs调用springboot的时候通常会出现跨域问题。

解决思路

这里的解决方案,主要是通过nginx搭建一个静态文件服务器,然后,再在此基础上面启用nginx的反向代理功能,反向代理springboot的rest接口服务即可。 一图胜千言

nginx.conf

# 启动多worker进程
worker_processes  auto;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
	# 假装配置springboot服务集群
	upstream myspringboot {
        server 127.0.0.1:8081;
		keepalive 32;
    }
    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"';
    sendfile        on;
    keepalive_timeout  65;
    # 启用gzip压缩
    gzip  on;
    server {
        # nginx服务器对外8080端口
        listen       8080;
        server_name  localhost;
        # 日志输出
        access_log  logs/myvuejs.access.log  main;
        # vuejs静态文件配置
        location / {
            root myvuejs;
            index  index.html index.htm;
        }
        # 反向代理springboot接口服务
        location /api/springboot/ {
			# 解决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_pass http://myspringboot/api/springboot/;
			proxy_http_version 1.1;
	        proxy_set_header Connection "";
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

其中: root myvuejs;表示myvuejs文件夹里面的全部都是vuejs的配置文件;反向代理的部分,主要就是将前端调用的/api/springboot/的rest接口请求,反向代理到http://xxxxxxxx:8081/api/springboot/的springboot接口上面去。 **注意:**在Spring boot获取ip地址需要使用HttpServletRequest request.getHeader("X_FORWARDED_FOR");方法

总结

跨域问题,无需在springboot或vuejs打开跨域支持,直接使用nginx的静态文件服务器和反向代理服务器功能就可以解决这个问题了。

参考

© 著作权归作者所有

亚林瓜子

亚林瓜子

粉丝 23
博文 257
码字总数 88625
作品 0
长沙
高级程序员
私信 提问
springboot整合vue小试牛刀

序 本文主要研究一下如何在springboot工程整合vue maven 新建springboot的web工程,默认会在resources目录下生成static以及templates文件夹 templates文件用于存放后端渲染的模板,这里我们采...

go4it
2018/09/24
612
0
nginx如何配置restful api反向代理?

问题描述: 前后端分离项目需要配置nginx负载均衡(反向代理) 1、前端项目是使用webpack搭建的一个vue + element + axios项目 2、后端采用springboot来快速开发接口,并且API接口使用了res...

easydecode
2018/06/27
3.3K
1
SpringBoot-vue 0.1发布, 一种高效Java全栈开发实践

背景 如今Web开发领域,当有人提到Java时,总会让人觉得臃肿、古老而过时且开发效率没有某些动态语言高效,甚至在此之前还有人高喊“Java 已死”;,但是事实真是如此吗?其实如果你一直关注着...

boylegu
2017/07/11
39
0
解决SpringBoot获取不到PUT方式提交的参数的问题

最近开发的项目中,使用了采用put方式更新数据记录,但是当和前端结合时,发现无法通过@NotBlank的验证器验证。一开始以为是前端同学的参数名称设置的不对,但是查阅资料后发现是SpringBoot配...

muzi1994
2018/07/09
65
0
Spring Blade 2.0 双版齐发,基于 AVue 的前端以及单工程版发布

SpringBlade 2.0 正式版发布后,大家对于 vue 版本的前端和 springboot 单工程版本呼声较高,所以榨干了自己的时间刚了两个版本出来!下面我们来看一下详细更新内容。 简介: SpringBlade 是...

smallchill
02/18
3.7K
13

没有更多内容

加载失败,请刷新页面

加载更多

Mybatis Plus删除

/** @author beth @data 2019-10-17 00:30 */ @RunWith(SpringRunner.class) @SpringBootTest public class DeleteTest { @Autowired private UserInfoMapper userInfoMapper; /** 根据id删除......

一个yuanbeth
今天
4
0
总结

一、设计模式 简单工厂:一个简单而且比较杂的工厂,可以创建任何对象给你 复杂工厂:先创建一种基础类型的工厂接口,然后各自集成实现这个接口,但是每个工厂都是这个基础类的扩展分类,spr...

BobwithB
今天
5
0
java内存模型

前言 Java作为一种面向对象的,跨平台语言,其对象、内存等一直是比较难的知识点。而且很多概念的名称看起来又那么相似,很多人会傻傻分不清楚。比如本文我们要讨论的JVM内存结构、Java内存模...

ls_cherish
今天
4
0
友元函数强制转换

友元函数强制转换 p522

天王盖地虎626
昨天
5
0
js中实现页面跳转(返回前一页、后一页)

本文转载于:专业的前端网站➸js中实现页面跳转(返回前一页、后一页) 一:JS 重载页面,本地刷新,返回上一页 复制代码代码如下: <a href="javascript:history.go(-1)">返回上一页</a> <a h...

前端老手
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部