跨域问题前后端解决方式(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.