Question

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

Answer 1

1、CORS的原理：CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。

2、tomcat如何配置cors的跨域请求： 
在tomcat中，有一个和cors相关的拦截器：CORS Filter

该过滤器可以通过添加必需的访问控制请求头Access-Control-*对象来进行跨域。同时还可以对一些请求进行拦截。如果请求是无效的，或者是不被允许的，该请求被拒绝或者禁止。 
其在web.xml文件中的基本配置如下：

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

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。这些头也将返回作为访问控制的一部分。