部署项目解决跨域问题·

问题:

前端发送请求到后端的时候,访问请求返回403(cros)典型的跨域问题

1.前端配置文件进行跨域设置,这里使用vue.conf配置

devServer: {                //记住，别写错了devServer//设置本地默认端口  选填
    port: 9876,
    proxy: {                 //设置代理，必须填  139.155.2.242
      '/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
        target: 'http://xxxxxxxxx:8070',     //代理的目标地址
        changeOrigin: true,              //是否设置同源，输入是的
        pathRewrite: {                   //路径重写
          '^/api': ''                     
        }
      },
      '/solr': {
        target:'http://xxxxxxxxx:8080/solr_run-1.0-SNAPSHOT', // 你请求的第三方接口
        changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite:{  // 路径重写，
          '^/solr': '' 
           // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api/v2/XXXXX这即可。
        }
      }
    }
  }

2. 部署到Nginx设置动态代理

  # 配置代理，解决跨域问题 
  # 后端接口
    location ^~ /api/ {
        proxy_set_header Host $host;
        proxy_set_header  X-Real-IP        $remote_addr;
        proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        proxy_pass http://x.x.x.x:8070/;
    }

3.后端进行跨域处理

• 注解@CrossOrigin注解 默认任何源可访问

String[] DEFAULT_ORIGINS = {“*”};

• cors过滤器 使用这个方式注册全局bean

@Configuration
public class MyConfiguration {

    // 当前跨域请求最大有效时长。这里默认1天
    private static final long MAX_AGE = 24 * 60 * 60;
//跨域过滤器
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("http://x.x.x.xx:9876"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        corsConfiguration.setMaxAge(MAX_AGE);
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor(){
        /**
         * 上述代码第一行是创建MyBatisPlus的拦截器栈，这个时候拦截器栈中没有具体的拦截器
         * 第二行是初始化了分页拦截器，并添加到拦截器栈中。
         * 如果后期开发其他功能，需要添加全新的拦截器，按照第二行的格式继续add进去新的拦截器就可以了。
         * **总结**
         * 1. 使用IPage封装分页数据
         * 2. 分页操作依赖MyBatisPlus分页拦截器实现功能
         * 3. 借助MyBatisPlus日志查阅执行SQL语句
         */
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor());
        return interceptor;
     }



    }

此时只有设置源的请求才能访问后台