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

来源:互联网 发布:vb6.0简单编程教学 编辑:程序博客网 时间:2024/06/16 02:19

比较常用的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)。


0 0