解决程序员经常遇到的跨域问题

什么是跨域

在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。

什么是同源策略？

同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下几种行为：

• Cookie、LocalStorage 和 IndexDB 无法读取
• DOM和JS对象无法获得
• AJAX 请求不能发送

综上可以简单理解为：

• 同一个服务器，或者同一个终端，同路径不同端口之间资源无法正常交互

解决办法：

• 后端：

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;


/**
* @user     ：subr
* @data     ：2021-07-16 10:31:48
*/
@Configuration
public class WebConfig implements WebMvcConfigurer { 

    @Bean
    public CorsFilter corsFilter() {
        //1.添加CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //1) 允许的域,建议不要写*，否则cookie就无法使用了
        config.addAllowedOrigin("http://xxx.xxx.com");
      	/*config.addAllowedOrigin("*");*/
     	/*config.addAllowedOrigin("http://api.xxx.com");*/
        config.addAllowedOrigin("*");
        //2) 是否发送Cookie信息
        config.setAllowCredentials(true);
        //3) 允许的请求方式
        config.addAllowedMethod("*");
        /*config.addAllowedMethod("HEAD");*/
        /*config.addAllowedMethod("GET");*/
        /*config.addAllowedMethod("PUT");*/
        /*config.addAllowedMethod("POST");*/
        /*config.addAllowedMethod("DELETE");*/
        /*config.addAllowedMethod("PATCH");*/
        // 4）允许的头信息
        config.addAllowedHeader("*");
        // 4）有效时间
        config.setMaxAge(3600L);
 
        //2.添加映射路径，我们拦截一切请求
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);
 
        //3.返回新的CorsFilter.
        return new CorsFilter(configSource);
    }
}

• 前端：

proxy:{
      // 配置跨域
      '/api': {
        target: 'http://*********:****',
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          '^/api': ''
        }
      },
    },