跨域问题前后端解决方式(SpringBoot/Vue)
SpringBoot()
SpringBoot主要通过CORS策略解决跨域问题,这个函数的作用就是让本地端口开放。不控制外来端口调用。
@Configuration
public class CORS {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOriginPatterns("*")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowedHeaders("*")
.allowCredentials(true)
.maxAge(3600);
}
};
}
}
二Vue(前端)
Vue的网络通信需要用到axios,所以先在项目中下载axios
npm install axios
下载后在main.js进行配置
导入axios:import axios from 'axios'
全局使用axios:Vue.prototype.$axios=axios
Vueapp实例中导入:
new Vue({
axios,
render: h => h(App),
}).$mount('#app')
最后设置它的基础URL:axios.defaults.baseURL = '/api';
这里的/api是跨域中我们自己设置的
打开vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
pathRewrite: {
'^/api': '' // 将 /api 替换为空字符串,这样发送请求时就不需要再加上前缀了
}
}
}
}
}
这里就是设置跨域,然后再main.js的baseurl中配置我们/api的值就可以进行跨域的使用了,使用前,如果我们的前端没有设置默认的端口号,需要设置成非后端的端口号,再launch中设置。比如这里的后端端口号是8080,那么前端的端口号就要设置成8081.