51Testing软件测试论坛

 找回密码
 (注-册)加入51Testing

QQ登录

只需一步,快速开始

测试开发精英班,通向高级软件测试工程师论坛测试积点免费获取渠道攻略20+企业级实战项目就在这里!横扫BAT,Python全栈测试开发技能大全
【114期】:谈数据库测试&测试开发相互间的关系!中国软件测试行业现状调查报告新鲜出炉! 【杂志】做测试行业不偏科的尖子生! 【活动】为视频UP主打CALL,互动领福利!
查看: 674|回复: 0

nginx解决vuejs与springboot跨域问题

[复制链接]

该用户从未签到

发表于 2019-1-28 13:50:11 | 显示全部楼层 |阅读模式
本帖最后由 老白的释然 于 2019-1-28 13:55 编辑

问题

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


解决思路

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


nginx.conf
  1. # 启动多worker进程
  2. worker_processes  auto;
  3. events {
  4.     worker_connections  1024;
  5. }
  6. http {
  7.     include       mime.types;
  8.         # 假装配置springboot服务集群
  9.         upstream myspringboot {
  10.         server 127.0.0.1:8081;
  11.     }
  12.     default_type  application/octet-stream;
  13.     # 日志格式
  14.     log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
  15.                       '$status $body_bytes_sent "$http_referer" '
  16.                       '"$http_user_agent" "$http_x_forwarded_for"';
  17.     sendfile        on;
  18.     keepalive_timeout  65;
  19.     # 启用gzip压缩
  20.     gzip  on;
  21.     server {
  22.         # nginx服务器对外8080端口
  23.         listen       8080;
  24.         server_name  localhost;
  25.         # 日志输出
  26.         access_log  logs/myvuejs.access.log  main;
  27.         # vuejs静态文件配置
  28.         location / {
  29.             root myvuejs;
  30.             index  index.html index.htm;
  31.         }
  32.         # 反向代理springboot接口服务
  33.         location /api/springboot/ {
  34.                         # 解决springboot中获取远程ip的问题
  35.                         proxy_set_header Host $host;
  36.             proxy_set_header X-Real-IP $remote_addr;
  37.             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  38.             proxy_pass http://myspringboot/api/springboot/;
  39.         }
  40.         error_page   500 502 503 504  /50x.html;
  41.         location = /50x.html {
  42.             root   html;
  43.         }
  44.     }
  45. }
复制代码

其中: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的静态文件服务器和反向代理服务器功能就可以解决这个问题了。



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?(注-册)加入51Testing

x
回复

使用道具 举报

本版积分规则

关闭

站长推荐上一条 /2 下一条

小黑屋|手机版|Archiver|51Testing软件测试网 ( 沪ICP备05003035号 关于我们

GMT+8, 2020-8-10 13:45 , Processed in 0.061313 second(s), 25 queries .

Powered by Discuz! X3.2

© 2001-2020 Comsenz Inc.

快速回复 返回顶部 返回列表