前后端分离是axios传递参数 前后端分离问题

跨域问题是前端开发常遇到的一个问题，或者更准确的说是前后端分离项目常遇到的问题。

 

为什么会出现这个问题呢？

 

之所以出现跨域问题，是因为浏览器为了防御一些我们常见或者不常见的攻击手段，为了隔离一些潜在的恶意文件，所设计的一种安全机制《同源策略》，

该机制使浏览器限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互，不同的源包括 域名不同，协议不同，端口不同。

 

怎么解决这个问题呢？通常是由两种思路来解决的分别是：

 

①前端处理：开发环境可以使用本地代理、生产环境下可以使用Nginx配置替代

 

    我们使用本地代理来解决跨域问题的思路就是，在本地创建一个虚拟服务器，对前端请求进行代理，同时接收服务器端响应，这样服务端和服务端进行数据的交互就不会出现跨域问题了。

 

module.exports = {
    dev: { 
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
         target: 'http://localhost:9002', // 你请求的第三方接口 
         changeOrigin: false, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
         pathRewrite: { // 路径重写，
            '^/api': '' // 替换target中的请求地址，也就是说以后你在请求http://api.codingmore.top/v2/XXXXX这个地址的时候直接写成/api即可。
}
},
},
}

②服务端处理：开启跨域资源共享

 

跨域资源共享，也就是 Cross-Origin Resource Sharing，简拼为 CORS，是一种基于 HTTP 头信息的机制，通过允许服务器标识除了它自己以外的资源，从而实现跨域访问。

在 Spring Boot 应用中，加入 CORS 的支持简单到不忍直视，添加一个配置类就可以了。

 

@Configuration
public class GlobalCorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        // 设置你要允许的网站域名
        config.addAllowedOrigin("http://localhost:8080");

        //允许跨域发送cookie
        config.setAllowCredentials(true);
        //放行全部原始头信息
        config.addAllowedHeader("*");
        //允许所有请求方法跨域调用
        config.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

重启后端服务，发现请求已经可以正常访问了。