vue axios 跨域问题

本文从作者CSDN 解决 vue+axios+sprigboot 前后端分离项目跨域请求资源和获取session不一致问题同步

直接上解决方法

跨域请求资源问题

后端添加过滤器，实现HandlerInterceptor接口，重写preHandle方法，添加如下内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


@Component
public class FilterConfig implements HandlerInterceptor {
    public void afterCompletion(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2, Exception arg3)
            throws Exception {
    }

    public void postHandle(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2)
            throws Exception {
    }

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object arg2) throws Exception {
        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));  // 允许请求跨域
        response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
        response.setHeader("Access-Control-Allow-Credentials", "true");  // 允许请求携带session
        response.setHeader("Access-Control-Allow-Headers", "Authorization,Origin, X-Requested-With, Content-Type, Accept,Access-Token");
        return true;
    }
}

新建SpringMVCConfig类，继承WebMvcConfigurerAdapter类，自动注入FilterConfig 并设置过滤器拦截规则：

1
2
3
4
5
6
7
8
9


@SpringBootConfiguration
public class SpringMVCConfig extends WebMvcConfigurerAdapter {
    @Autowired
    private FilterConfig filterConfig;

    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(filterConfig).addPathPatterns("/**");
    }
}

以上配置能解决跨域请求，但是仍然存在每次请求session不一致问题，需要添加以下配置：

session不一致问题

vue2中，在main.js中引入axios并设置允许携带cookie：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


import Vue from 'vue'
import App from './App.vue'
import axios from 'axios';  // 引入axios
axios.defaults.withCredentials=true;  // 设置请求默认携带cookie
Vue.prototype.$axios = axios;  //  可选，设置后可使用“this.$axios”发起请求

// ...正常配置
new Vue({
    render: h => h(App),
    store,
    router,
    // ...
}).$mount('#app')
// ...正常配置

在vue.config.js中添加代理设置：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false,
    devServer: {
        proxy: {  // 添加代理设置
            '/app': {
                target: 'http://xxx.xxx.xxx.xxx:xxxx/',  // 跨域目标地址
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/app': ""
                }
            }
        }
    }
})

发起跨域请求：

1

this.$axios.post("/app/xxx/xxx")  // 必须是'/app'开头。对应上面的'/app'

—————–2022年6月9日更新———————-

网站上线问题

测试发现使用以上设置上线后请求报404，将前端请求改为正常请求即可结局

1

this.$axios.post("/app/xxx/xxx")  //

改为

1

this.$axios.post("http://xxx.xxx.xxx.xxx:xxx/...")

至此，vue+axios+springboot前后端分离项目中的跨域和session不一致问题完美解决！！！