关于js跨域Access-Control-Allow-Origin问题

比较常用的jsonp、cors

此次我们使用的是cors，下面给大家讲解一下cors是如何使用的。

CORS使用案例：

1、添加cors-filterjar包。

maven pom.xml文件配置：

<dependency>
   <groupId>com.thetransactioncompany</groupId>
   <artifactId>cors-filter</artifactId>
   <version>1.3.2</version>
</dependency>

下载包cors-filter-1.3.2.jar

2、在web.xml中添加filter过滤器。

<filter>
<filter-name>CORS</filter-name>
    <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
   <init-param>
       <param-name>cors.allowOrigin</param-name>
       <param-value>*</param-value>
   </init-param>
   <init-param>
       <param-name>cors.supportsCredentials</param-name>
       <param-value>false</param-value>
   </init-param>
   <init-param>
       <param-name>cors.supportedHeaders</param-name>
       <param-value>accept, authorization, origin</param-value>
   </init-param>
   <init-param>
       <param-name>cors.supportedMethods</param-name>
       <param-value>GET, POST, HEAD, OPTIONS</param-value>
   </init-param>
</filter>
<filter-mapping>
   <filter-name>CORS</filter-name>
   <url-pattern>/*</url-pattern>
</filter-mapping>

跨域资源共享（CORS）

CORS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。

通过jsonp跨域

现在问题来了？什么是jsonp？维基百科的定义是：JSONP（JSON with Padding）是资料格式 JSON 的一种“使用模式”，可以让网页从别的网域要资料。

JSONP也叫填充式JSON，是应用JSON的一种新方法，只不过是被包含在函数调用中的JSON，例如：

callback({"name","trigkit4"});

JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。

CORS和JSONP对比

CORS与JSONP相比，无疑更为先进、方便和可靠。

1、 JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。

2、 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。

 3、 JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS）。