我最近在学习spring boot+vue实现前后端分离,在做登录时发现无法进行跨域登录,springboot端口是8081,前端端口是8080,在bing后通过添加FilterConfig配置后可以实现跨端口登录,但是当我使用局域网(192.168.11.43)ip去登录后获取session时却访问不到用户登录信息(登录(userLogin)与登录状态获取(getUserSession)两次sessionID不一致),但是当我把axios请求地址设置为192.168.11.43时就可以访问到session(sessionID一致),目前情况应该是同Ip不同端口可以跨域,前后端Ip不一致时无法跨域访问。
我要怎么才能实现像前后端不分离时的无限制跨域,局域网ip和localhost以及127.0.0.1同时能够跨域访问。
FilterConfig 代码
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@Component
public class FilterConfig implements HandlerInterceptor {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));
response.setHeader("Access-Control-Allow-Methods", "*");
response.setHeader("Set-Cookie", "JSESSIONID=xxx;SameSite=None;Secure");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Headers", "Authorization,Origin, X-Requested-With, Content-Type,Accept,Access-Token");
response.setHeader("Set-Cookie", "JSESSIONID=xxx;SameSite=None;Secure");
return true;
}
}
Vue前端全局配置
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from "@/router"
import App from './App.vue'
import axios from 'axios'
axios.defaults.baseURL='https://192.168.11.43:8081/'
axios.defaults.withCredentials = true
import '@/assets/css/app.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App).use(router)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(ElementPlus)
app.mount('#app')
这里改成*就完了
response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));
response.setHeader("Access-Control-Allow-Origin","*");