浏览器跨域

浏览器跨域问题

浏览器为了安全，只允许向与当前地址栏同域名、同端口的服务器发送请求。域名不同、端口不同时，都成为跨域。

解决方式：

1. 将域名、端口改为相同

   前后端都请求Nginx，再由Nginx进行反向代理，如：有 /api 的就代理到后端服务器

2. 让服务器告诉浏览器，可以跨域（返回允许跨域的响应头）

   后端链路上有一个地方加上响应头就可以解决跨域问题

   后端项目访问流程：用户输入网址=>域名解析服务器=>服务器=>Nginx接受请求=>后端项目（如8080端口）

   • 网关支持（修改Nginx配置文件）

     # 跨域配置
     location ^~ /api/ {
     	#反向代理，访问api时把请求转发到本机8080
         proxy_pass http://127.0.0.1:8080/api/;
         add_header 'Access-Control-Allow-Origin' $http_origin;
         add_header 'Access-Control-Allow-Credentials' 'true';
         add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
         add_header Access-Control-Allow-Headers '*';
         if ($request_method = 'OPTIONS') {
             add_header 'Access-Control-Allow-Credentials' 'true';
             add_header 'Access-Control-Allow-Origin' $http_origin;
             add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
             add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
             add_header 'Access-Control-Max-Age' 1728000;
             add_header 'Content-Type' 'text/plain; charset=utf-8';
             add_header 'Content-Length' 0;
             return 204;
         }
     }
     

     ​

   • 修改后端服务支持跨域（修改后端项目代码）

     1. 配置@CrossOrigin注解

        //在controller文件上配置@CrossOrigin注解
        @CrossOrigin(origins = "http://domain.com", maxAge = 3600)
        

        ​

     2. 添加web全局请求拦截器

        @Configuration
        public class WebMvcConfig implements WebMvcConfigurer {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                // 设置允许跨域的路径
                registry.addMapping("/**")
                // 设置允许跨域请求的域名
                // 当Credentials为true时，Origin不能为星号，需为具体的ip地址【如果接口不带cookie, ip无需设成具体ip】
                //         .allowedOrigins("http://127.0.0.1:808080")
                        .allowedOriginPatterns("*")
                        // 是否允许证书 不再默认开启
                        .allowCredentials(true)
                        // 设置允许的方法
                        .allowedMethods("GET", "POST", "OPTIONS", "DELETE", "PUT", "PATCH")
                        // 跨域允许时间
                        .maxAge(3600);
            }
        }
        

补充：

前端访问项目的流程：用户输入网址=> 域名解析服务器（把网址解析为IP地址/交给其他的域名解析服务器）=>Nginx接受到请求，找到对应的文件，返回文件给前端=>前端加载文件到浏览器中

后端项目访问流程：用户输入网址=>域名解析服务器=>后端服务器=>Nginx接受请求=>后端项目（如8080端口）