vue怎么和后端对接_vue搭配什么后端

vue怎么和后端对接_vue搭配什么后端简单分享一下jeeplus框架部署liunx服务器跨域问题 ,因为我这个是前后端服务器分离所以配置了俩份java后端配置1.跨域后端配置nginx(图-1)上配置 server { listen 80; server_name xxx.xx.xxx; #后端服务域名 #charset koi8-r; #access_log logs/host.access.log main; locatio

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

简单分享一下jeeplus框架部署liunx服务器跨域问题 ,因为我这个是前后端服务器分离所以配置了俩份

java后端配置
1.跨域后端配置nginx(图-1)

后端nginx配置上配置

 server {
        listen       80;
        server_name  xxx.xx.xxx;  #后端服务域名

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
	
        location / {

			add_header Access-Control-Allow-Origin 'http://xxx.xx.xx';  #web端服务域名
			add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS,DELETE';
			#add_header Access-Control-Allow-Headers 'DNT,token,X-Mx-ReqToken,X-CSRF-Token,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
			add_header Access-Control-Allow-Headers '*';
			if ($request_method = 'OPTIONS') {
				return 204;
			}
			
			
			proxy_connect_timeout 300s;
			proxy_send_timeout 300s;
			proxy_read_timeout 3000s;
            proxy_set_header X-Real-IP  $remote_addr; 
			
			#proxy_set_header  Host $host:8082;
            #proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
            #proxy_set_header X-Forwarded-For $remote_addr;

			#proxy_pass  http://nginxPort;
            proxy_pass   http://127.0.0.1:8082; 
            #index  localhost:8082/;
			
				
        }	

		
	}
	

2.跨域后端代码修改(图-2)
java后端代码修改处上图 配置类 位置在:package com.jeeplus.modules.sys.security.shiro.JWTFilter; ===>最后一个方法preHandle

好啦,就这么简单;后端跨域就解决啦~ 如果你是同一台服务器,但是不通域名呢也可以参照修改,如果直接都是用ip应该是不存在跨域问题哦!

接下来请看前端配置修改

——————————–我———–是———-分———-界————-线 ——————————-

vue端跨域
1.首先还是nginx配置附图(图-1)
vue配置nginx上配置

    #vue springboot
server {
    listen       80;
    server_name  xxx.xxx.xx;  #web端域名
	
    location ^~ /userfiles {
        proxy_pass              http://xxx.xx.xxx.xx:xx/userfiles;   #后端ip
        proxy_set_header        Host xxx.xx.xxx.xx;   #后端ip
        proxy_set_header        X-Real-IP $remote_addr;
        proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
    }

	location / {
		root X:/xxx/xxxx;   #web项目存放位置
		try_files $uri $uri/ @router;
		index index.html;
	}
	#对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
	#因此需要rewrite到index.html中,然后交给路由在处理请求资源
	location @router {
		rewrite ^.*$ /index.html last;
	}
}

这里 如果不配置 ~^ /userfiles 会让项目内的文件等全部跨域,所以必须配置,选择好自带文件上传位置后在此处配置好,后续自带生成的文件上传就都会出现在该位置下拉~

这里配置这个是让前端服务器能够正常找到后端服务的

2.开始web端代码修改了。

  1. 如下图找到src.sys.config.SysConfig.vue 也可以全局搜索产品logo 在对应位置添加代码:headers="{token:$cookie.get('token')}" 带符号哦,即可。
    web端代码修改
  2. 如下图找到src.httpRequest.js 修改代码为 axios.defaults.withCredentials = false
    web代码修改
  3. 与2.2同一个文件内在往下扒拉就可以找到最后一个修改处拉 ,添加代码 config.headers.token = Vue.cookie.get('token')

代码修改web

好啦~本文到此结束了,感谢观看,有用点个赞收藏一下,码文不易
你我环境不匹配,仅供参考,祝你成功

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/171188.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 算法笔记–sg函数详解及其模板

    算法笔记–sg函数详解及其模板

  • 前缀和与差分数组[通俗易懂]

    前缀和与差分数组[通俗易懂]文章目录适合解决的问题差分数组的定义解释借教室(二分加差分数组)适合解决的问题例:n个数,m次操作。每一次操作都给定区间和数值[l,r]+del.最后有q个询问,问[l,r]点的值或者单点查值。注:先进行m个修改操作,后进行查询操作。(离线的区间区间修改问题)差分数组的定义记录当前位置与上一位置数的差值解释原数组a[5]=9,3,5,4,2差分数组b[5]=9,-6,2,…

  • 2013年上海交大学生论文致谢[通俗易懂]

    2013年上海交大学生论文致谢[通俗易懂]公元两千零七年,岁次丁亥,仲夏之月,联科论文乃告杀青。辞穷理微,未敢称凌云之作,镂心鸟迹,得不效相如之叹?于是凭窗抱膝,寄情遐思。忆吾弱冠之龄入交通大学,意气方遒。尔来春秋有八,于今毕业,年齿已趋而立。户牅之外,万物滋荣,景致阙如昨日,堂室之内,联科已有苍颜白发矣。文凭两纸霜鬓两行,黄粱一枕功名一场,此皆寻常人生,乏善可陈。然联科身发受之父母,道德受之母校,学问受之师长,育教之恩,虽陨首结草不能报

  • Android开发中,怎样调用摄像机拍照以及怎样从本地图库中选取照片

    Android开发中,怎样调用摄像机拍照以及怎样从本地图库中选取照片这是属于我的第一篇博文,首先说明一下,文章属性为原创,其实不能说是原创,我是在学习的过程中根据自己的理解整理的。文章内容大多为书本上的内容,书本是郭霖的《第一行代码》。    正文:现在很多应用程序会调用摄像头的拍照功能,比如哪个程序要上传一张图片作为用户头像,这是启用摄像头拍照会很方便。当然,还有第二种方法,就是在本地图库选取已经被保存的图片。现在,我就根据自己学习的过程,将这部分

  • 【转载】来自 GitHub 的系列渗透测试工具

    【转载】来自 GitHub 的系列渗透测试工具51CTO2019-04-03渗透测试Kali-GNU/Linux发行版,专为数字取证和渗透测试而设计。(https://www.kali.org/)ArchStrike-为安全专业人士和爱好者提供ArchGNU/Linux存储库。(https://archstrike.org/)BlackArch-基于GNU/Linux的分布式渗透测试…

  • java 查看线程死锁_java 查看线程死锁

    java 查看线程死锁_java 查看线程死锁那我们怎么确定一定是死锁呢?有两种方法。1>使用JDK给我们的的工具JConsole,可以通过打开cmd然后输入jconsole打开。1)连接到需要查看的进程。2)打开线程选项卡,然后点击左下角的“检测死锁”3)jconsole就会给我们检测出该线程中造成死锁的线程,点击选中即可查看详情:从上图中我们可以看出:①在线程Thread-1中,从状态可以看出,它想申请Paper这个资源,但是这个资…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号