前后端跨域问题（解决方向和思路）

什么是跨域？

浏览器的同源策略是跨域问题的根本所在。同源策略是一个非常重要的安全策略，它用于限制两个源之间在浏览器上进行资源交互。如果缺少了同源策略，网站或服务器很容易受到 XSS、CSFR 等攻击。

那么同源是什么意思？同源表示两个 URL 的 origin(源、请求头) 是相同的，origin 由 protocol(协议) 和 host(域名) 和 port(端口) 组成。

简单一点就是指 协议，域名，端口都要相同，其中有一个不同都会产生跨域

解决方向——前端配置代理解决

前端实现跨域，即配置 devServer(开发服务器)
每个不同前端框架配置devServer的位置不一样
我这边是vue框架，所以是vue.config.js

// vue.config.js
  devServer: {
    
      //开启代理服务器
    proxy:{
    
    
      "/api": {
    
      // /api是自行设置的请求前缀，按照这个来匹配请求，有这个字段的请求，就会走到代理来。
          target: "http://www.aaabbbccc.com", // 需要代理的域名，目标域名，会替换掉匹配字段之前的路径
           ws: false, // 是否启用websockets
          changeOrigin: true, //是否跨域
          pathRewrite: {
    
      //重写匹配的字段，如果不需要放在请求路径上，可以重写为""
              "^/api": ""
          }
      },
   
  },
  }

参考文章（更详细）
【1】https://blog.csdn.net/tttttrrrhh/article/details/127685318
【2】https://blog.csdn.net/X_W123/article/details/120369610?spm=1001.2014.3001.5506

以上配置中，我配置了一个 /api，只有包含这个请求的路径才会走代理，例如：

http://localhost:8080/api/login //这个就可以走代理
http://localhost:8080/login //这个就不行

转换步骤

此时我发送的请求就是：

http://localhost:8080/api/login
http://localhost:8080/api/user/hello

遇到 包含”/api“ 的才起效

通过代理的 target 属性加工之后就是 ：

http://www.aaabbbccc.com/api/login
http://www.aaabbbccc.com/api/getlist

在通过 pathRewrite属性 将 /api 替换为空 为：

http://www.aaabbbccc.com/login
http://www.aaabbbccc.com/user/hello

示例图

解决方向——nginx配置代理解决

参考文章（更详细）
【1】https://blog.csdn.net/qq_20236937/article/details/128151067?spm=1001.2014.3001.5501（nginx 前端及后端接口代理配置）

# 请求路径为：http://127.0.0.1:8080/api/getUser   实际代理为：http://127.0.0.1:8000/getUser
    location ^~/api/ {
    
    
      proxy_pass http://127.0.0.1:8000/;
      proxy_set_header Host $http_host; #后台可以获取到完整的ip+端口号
      proxy_set_header X-Real-IP $remote_addr; #后台可以获取到用户访问的真实ip地址
    }

解决方向——后端代码解决

参考文章（更详细）
【1】https://blog.csdn.net/lidongkui123/article/details/123720743（JAVA Java 解决跨域问题）

一、使用Filter方式进行设置

@WebFilter
public class CorsFilter implements Filter {
    
      

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
    
      
        HttpServletResponse response = (HttpServletResponse) res;  
        response.setHeader("Access-Control-Allow-Origin", "*");  
        response.setHeader("Access-Control-Allow-Methods", "*");  
        response.setHeader("Access-Control-Max-Age", "3600");  
        response.setHeader("Access-Control-Allow-Headers", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        chain.doFilter(req, res);  
    }  
}

二、继承 HandlerInterceptorAdapter

@Component
public class CrossInterceptor extends HandlerInterceptorAdapter {
    
    

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
    
    
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        return true;
    }
}

三、实现 WebMvcConfigurer

@Configuration
@SuppressWarnings("SpringJavaAutowiredFieldsWarningInspection")
public class AppConfig implements WebMvcConfigurer {
    
    

    @Override
    public void addCorsMappings(CorsRegistry registry) {
    
    
        registry.addMapping("/**")  // 拦截所有的请求
                .allowedOrigins("http://www.abc.com")  // 可跨域的域名，可以为 *
                .allowCredentials(true)
                .allowedMethods("*")   // 允许跨域的方法，可以单独配置
                .allowedHeaders("*");  // 允许跨域的请求头，可以单独配置
    }
}

四、使用Nginx配置 （有风险）

location / {
    
    
   add_header Access-Control-Allow-Origin *;
   add_header Access-Control-Allow-Headers X-Requested-With;
   add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;

   if ($request_method = 'OPTIONS') {
    
    
     return 204;
   }
}