前后端对于跨域的解决方案

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 debug
         return Promise.reject(error)
     }
 )

 export default 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 debug
         return Promise.reject(error)
     }
 )
 
 export default request

3、SpringBoot解决跨域问题

遇到前端跨域访问问题，解决方案：

在springboot项目中添加配置文件CorsConfig.java，重启之后即可实现跨域访问~

 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;
 
 @Configuration
 public class CorsConfig {
 
     // 当前跨域请求最大有效时长。这里默认1天
     private static final long MAX_AGE = 24 * 60 * 60;
 
     @Bean
     public CorsFilter corsFilter() {
         UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
         CorsConfiguration corsConfiguration = new CorsConfiguration();
         corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
         corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
         corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
         corsConfiguration.setMaxAge(MAX_AGE);
         source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
         return new CorsFilter(source);
     }
 }