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

全栈程序员-站长 • 2022年8月19日下午11:16 • 未分类 • 阅读 8

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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端代码修改了。

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