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

最近楼主在写代码的时候遇到了一个比较纠结的问题，需要在http请求的页面调用HTTPS的请求，但因为进行了跨域，导致请求失败。在这个过程中，楼主找了很多办法，如JSONP等，但都不能满足我的需求，后来，楼主发现，CORS提供了一套AJAX跨域问题的解决方案。

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

---

• 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>

• cors.allowed.origins：允许访问资源的源列表。*表示任何来源都可以访问该资源。否则，只有配置的白名单的来源可以访问该资源，其中白名单用逗号隔开，如http://localhost:8080,https://localhost:8443。

• cors.allowed.methods：允许访问的http请求方法，如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。这些头也将返回作为访问控制的一部分。

下面，是我在http页面调用HTTPS请求时返回的数据：