跨域请求前后端基础解决方案（同时使用）

最新推荐文章于 2023-04-27 10:00:00 发布

菜是真菜

最新推荐文章于 2023-04-27 10:00:00 发布

阅读量430

点赞数

文章标签： java

本文链接：https://blog.csdn.net/weixin_46618760/article/details/106336475

版权

一.前端逻辑（基于elementUI）

找到我们设置端口的index.js索引文件，定位到proxyTable属性，在其中添加反向代理

代理格式如下：

proxyTable: 
    '/api': {//配置反向代理，如果在请求的前面加上/api 就相当于将请求发往http://localhost:80
        target: 'http://localhost:80',
        changeOrigin: true,
        pathRewrite: {
            '^/api': '' //类似于nginx反向代理所有以api开头的访问
        }
    },
},

然后在我们的main.js中对axios配置一个默认全局属性（需先配置并使用axios），格式如下

import axios from 'axios'

//给vue添加一个全局属性
Vue.prototype.$http=axios;

axios.defaults.baseURL='/api'//把所有使用axois发送的请求前面加上/api

这样我们所有对后端的跨域请求都可以实现了。

二，后端逻辑

直接在basic.congfig文件夹中增加一个GlobalCorsConfig文件，文件内容如下

@Configuration
public class GlobalCorsConfig {

    @Bean
    public CorsFilter corsFilter() {//此处导入的是spring公司的的web包，不是阿帕奇公司的
        //1.添加CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //1) 允许的域,不要写*，否则cookie就无法使用了
        config.addAllowedOrigin("http://127.0.0.1");
        config.addAllowedOrigin("http://localhost:8081");
        config.addAllowedOrigin("http://localhost:8082");
        config.addAllowedOrigin("http://127.0.0.1:8081");
        config.addAllowedOrigin("http://127.0.0.1:8082");
        //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");
        // 4）允许的头信息
        config.addAllowedHeader("*");
        //2.添加映射路径，我们拦截一切请求//此处导入的是cors包，而不是cors的子包
        UrlBasedCorsConfigurationSource configSource = new
                UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);
        //3.返回新的CorsFilter.
        return new CorsFilter(configSource);
    }
}

两种配置一种即可实现跨域，建议两种一起使用防止出错。注：如果跨域完成后发现请求被404，如果后端的controller没问题吗，那可能是我们的main.js把axios的配置写在了import上面导致他不能把/api解析成想要的地址。