如何用CORS来解决JS中跨域的问题

如何用CORS来解决JS中跨域的问题

1、CORS的原理：CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。
2、tomcat如何配置cors的跨域请求： 
在tomcat中，有一个和cors相关的拦截器：CORS Filter
该过滤器可以通过添加必需的访问控制请求头Access-Control-*对象来进行跨域。同时还可以对一些请求进行拦截。如果请求是无效的，或者是不被允许的，该请求被拒绝或者禁止。 
其在web.xml文件中的基本配置如下：

        CorsFilter
        org.apache.catalina.filters.CorsFilter
        
            cors.allowed.origins
            
                http://localhost:8080,
                https://localhost:8443
            
        
        
            cors.allowed.methods
            
                GET,POST,HEAD,OPTIONS,PUT
            
        
        
            cors.allowed.headers
            
                Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Access-Control-Allow-Origin
            
        
        
            cors.exposed.headers
            
                Access-Control-Allow-Origin,Access-Control-Allow-Credentials
            
        
        
            cors.support.credentials
            true
        
        
            cors.preflight.maxage
            10
        
    
    
        CorsFilter
        /wxrefund/*
    

3、cors.allowed.origins：允许访问资源的源列表。*表示任何来源都可以访问该资源。否则，只有配置的白名单的来源可以访问该资源，其中白名单用逗号隔开，如http://localhost:8080,https://localhost:8443。
4、cors.allowed.methods：允许访问的http请求方法，如GET,POST,HEAD,OPTIONS,PUT等，方法名用逗号隔开。
5、cors.allowed.headers：在实际请求时可使用的请求头列表，用逗号隔开。如Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Access-Control-Allow-Origin。这些头也将返回作为访问控制的一部分。