1、前端跨域解决方案
request.js用来请求数据，封装的代码如下：
request.js ：在vue/src/utils 之下 ~
import axios from 'axios'const request = axios.create({baseURL: '/api', // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！timeout: 5000})// request 拦截器// 可以自请求发送前对请求做一些处理// 比如统一加token，对请求参数统一加密request.interceptors.request.use(config => {config.headers['Content-Type'] = 'application/json;charset=utf-8';// config.headers['token'] = user.token; // 设置请求头return config}, error => {return Promise.reject(error)});// response 拦截器// 可以在接口响应后统一处理结果request.interceptors.response.use(response => {let res = response.data;// 如果是返回的文件if (response.config.responseType === 'blob') {return res}// 兼容服务端返回的字符串数据if (typeof res === 'string') {res = res ? JSON.parse(res) : res}return res;},error => {console.log('err' + error) // for debugreturn Promise.reject(error)})export default request
注意点：导入文件之后：要在main.js中进行使用：
import request from './utils/request';Vue.prototype.request = request;
vue.config.js：这个文件是与vue/src同级存放~
// 跨域配置module.exports = {devServer: { //记住，别写错了devServer//设置本地默认端口 选填port: 9876,proxy: { //设置代理，必须填'/api': { //设置拦截器 拦截器格式 斜杠+拦截器名字，名字可以自己定target: 'http://localhost:9999', //代理的目标地址changeOrigin: true, //是否设置同源，输入是的pathRewrite: {//路径重写'^/api': '' //选择忽略拦截器里面的内容}}}}}
2. 后端跨域解决方案
如果后端设置了跨域配置，则使用下面的request.js 代码：
import axios from 'axios'const request = axios.create({baseURL: 'http://localhost:9090', // 注意！！ 这里是全局统一加上了 后端接口前缀 前缀，后端必须进行跨域配置！timeout: 5000})// request 拦截器// 可以自请求发送前对请求做一些处理// 比如统一加token，对请求参数统一加密request.interceptors.request.use(config => {config.headers['Content-Type'] = 'application/json;charset=utf-8';// config.headers['token'] = user.token; // 设置请求头return config}, error => {return Promise.reject(error)});// response 拦截器// 可以在接口响应后统一处理结果request.interceptors.response.use(response => {let res = response.data;// 如果是返回的文件if (response.config.responseType === 'blob') {return res}// 兼容服务端返回的字符串数据if (typeof res === 'string') {res = res ? JSON.parse(res) : res}return res;},error => {console.log('err' + error) // for debugreturn Promise.reject(error)})export default request
3、SpringBoot解决跨域问题
遇到前端跨域访问问题，解决方案：
SpringBoot版本的不同,CrossOrigin失效了,正确配置如下:
@CrossOrigin(origins = "*", allowCredentials = "true", maxAge = 3600)
如果以上方法还是不生效,最后的终极方法可以进行硬编码进行跨域设置:
对需要跨域的接口,进行Response对象设置可跨域URL设置(*代表所有URL可跨域访问)
在springboot项目中添加配置文件CorsConfig.java，重启之后即可实现跨域访问~
import org.springframework.boot.web.servlet.FilterRegistrationBean;import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import org.springframework.web.cors.CorsConfiguration;import org.springframework.web.cors.UrlBasedCorsConfigurationSource;import org.springframework.web.filter.CorsFilter;/*跨域问题*/@Configurationpublic class CorsConfig {@Beanpublic FilterRegistrationBean corsFilter() {//1.添加CORS配置信息CorsConfiguration config = new CorsConfiguration();//1) 允许的域,不要写*，否则cookie就无法使用了//config.addAllowedOrigin("");//config.addAllowedOrigin("");config.addAllowedOrigin("*");//2) 是否发送Cookie信息config.setAllowCredentials(true);//3) 允许的请求方式config.addAllowedMethod("OPTIONS");config.addAllowedMethod("HEAD");config.addAllowedMethod("GET");config.addAllowedMethod("PUT");config.addAllowedMethod("POST");config.addAllowedMethod("DELETE");config.addAllowedMethod("PATCH");config.setMaxAge(3600L);// 4)允许的头信息config.addAllowedHeader("*");//2.添加映射路径，我们拦截一切请求UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();configSource.registerCorsConfiguration("/**", config);//3.返回新的CorsFilter.//return new CorsFilter(configSource);FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(configSource));bean.setOrder(0);return bean;}}
