Vue项目搭建常用配置文件！

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
 ​
 ​

• 注意点：导入文件之后：要在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 debug
         return 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;
/*
    跨域问题
 */
@Configuration
public class CorsConfig {
    @Bean
    public FilterRegistrationBean corsFilter() {
        //1.添加CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //1) 允许的域,不要写*，否则cookie就无法使用了
        //config.addAllowedOrigin("http://manage.leyou.com");
        //config.addAllowedOrigin("http://www.leyou.com");
        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;
    }

}