前后端分离跨域解决方案-4种

心已赠人 2022-04-13 08:10 200阅读 0赞

> **一、第一种方式:**
> 
> **1、编写一个支持跨域请求的 Configuration**

import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
    
    /**
     * 处理AJAX请求跨域的问题
     * @author Levin
     * @time 2017-07-13
     */
    @Configuration
    public class CorsConfig extends WebMvcConfigurerAdapter {
        static final String ORIGINS[] = new String[] { "GET", "POST", "PUT", "DELETE" };
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**").allowedOrigins("*").allowCredentials(true).allowedMethods(ORIGINS)
                    .maxAge(3600);
        }
    }
    2、HTTP请求接口
    
    @RestController
    public class HelloController {
    
        @Autowired
        HelloService helloService;
    
    
        @GetMapping(value = "/test", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
        public String query() {
            return "hello";
        }
    }

> **二、 第二种方式（推荐）**
> 
> **PS：第一种存在一个问题，当服务器抛出 500 的时候依旧存在跨域问题**

package com.example.demo.config;
    
    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;
    
    /**
     * @Author: Lee
     * @Date: 2018/11/28 14:10
     * @Description:
     */
    @Configuration
    public class CorsConfig{
    
        private CorsConfiguration buildConfig() {
            CorsConfiguration corsConfiguration = new CorsConfiguration();
            // 允许跨域访问的域名
            corsConfiguration.addAllowedOrigin("*");
            // 请求头
            corsConfiguration.addAllowedHeader("*");
            // 请求方法
            corsConfiguration.addAllowedMethod("*");
            // 预检请求的有效期，单位为秒。
            corsConfiguration.setMaxAge(3600L);
            // 允许发送Cookie
            corsConfiguration.setAllowCredentials(true);
            return corsConfiguration;
        }
    
        /**
         * 跨域过滤器
         *
         * @return
         */
        @Bean
        public CorsFilter corsFilter() {
            UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
            source.registerCorsConfiguration("/**", buildConfig());
            return new CorsFilter(source);
        }
    
    }

> ** index.html**

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
    var params={
    	userId : 1,
    	productId : 1,
    	quantity : 3
    };
    //通过post请求后端
     $.post("http://localhost:10000/purchase/test",params,function(result){
    	alert(result.message)
    }) 
    
    </script>
    </head>
    <body>
    	<input type="button" value="ajaxtest" onclick="ajaxtest()"/>
    </body>
    
    </html>

> **三、第三种方式，编写Filter过滤器 **

@Component
    public class OriginFilter implements Filter {
    
        @Override
        public void init(FilterConfig filterConfig) throws ServletException {
    
        }
    
        @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", "POST, GET, OPTIONS, DELETE,PUT");
            response.setHeader("Access-Control-Max-Age", "3600");
            response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
            chain.doFilter(req, res);
        }
    
        @Override
        public void destroy() {
            // TODO Auto-generated method stub
    
        }
    
    }

> **四、Nginx跨域配置**
> 
> **Nginx跨域也比较简单，只需添加以下配置即可。**

location / {
        proxy_pass http://localhost:8080;
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }
        if ($request_method = 'POST') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';
            add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';
        }
        if ($request_method = 'GET') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';
            add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';
        }
    }