关于Ajax跨域问题之CORS

原文

文章来源：http://blog.csdn.net/saytime/article/details/51549888

一、介绍

CROS是现在主流解决跨域问题的方案，未来估计也是趋势。

1. 跨域资源共享（CORS）

Cross-Origin Resource Sharing(CORS) 是W3c工作草案，它定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方，从而决定请求或响应成功与否。

2. CORS与JSONP

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

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

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

  3. JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS。
    对一个简单的请求，没有自定义头部，要么使用GET，要么使用POST，它的主体是text/plain,请求用一个名叫Orgin的额外的头部发送。Origin头部包含请求页面的头部（协议，域名，端口），这样服务器可以很容易的决定它是否应该提供响应。
    服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。

二、实战

1、模拟跨域请求

同样的还是http://blog.csdn.net/saytime/article/details/51540876的案例，用jsonp（8080）页面的按钮去获取other（8888）中jsp的数据。（模拟servlet接口）

http://localhost:8080/jsonp/index.jsp
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> head> title>Insert title here</title> script type="text/javascript" src="js/jquery.min.js">script> "text/javascript"> function jsonp_fun(){ $.ajax({ url:'http://localhost:8888/other/index.jsp',type:'post',dataType:'text',success:function(data){ console.log(data); } }); } script> body> input "button" value="jsonp" onclick="jsonp_fun()"/> body> html>

http://localhost:8888/other/index.jsp
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    <%@ page language=body> other domain 点击按钮，发送请求。控制台输出如下：

    查看http请求信息，发现状态码是200，但是就是提示跨域。

    其实写的很明白了，XMLHttpRequest不能加载8888端口的数据，在请求的资源上没有Access-Control-Allow-Origin的头部header，因此8080这个域没有访问权限。

    2、设置Access-Control-Allow-Origin

    加入响应头。
  • 1
    • 1
    response.setHeader("Access-Control-Allow-Origin","*");
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    <%@ page language=body> <% response.setHeader("*"); %> other domain 然后再发送ajax请求。

    查看http请求信息，对比之前的http请求信息。

    "*"
    );

    这里*为通配符，表示允许所有的域请求来源。一般情况下，为了安全，设置为自己信任的域名，表示仅供信任的域名访问，其他域名也就访问不了了。

    "http://localhost:8080"
    );

    这样设置同样可以访问，这里就不贴图了，这里的域信息必须完全匹配，包括端口，为了演示，下面设置为

    "http://localhost");

    自己看信息呀，依旧跨域，所以设置的时候要注意。

    3、设置Access-Control-Allow-Methods

    Access-Control-Allow-Methods：表示允许请求的请求类型，比如GET,POST,OPTIONS,PUT等。
  • 1
  • 2
  • 3
  • 4
    • 1
    • 2
    • 3
    • 4
    <% "*"); "Access-Control-Allow-Methods",0); Box-sizing: border-Box;">"GET,POST"); %>

    设置成如下，同样可以访问，因为我们ajax方法设置的是post，如果我们改为put，然后请求结果如下：

    Access-Control-Request-Method – 该项内容是实际请求的种类，可以是GET、POST之类的简单请求，也可以是PUT、DELETE等等。
    Access-Control-Request-Headers – 该项是一个以逗号分隔的列表，当中是复杂请求所使用的头部。

    这里有几个问题，我也不是很清楚。
    1、首先是这里的Request Method:OPTIONS，这个OPTIOINS很奇怪，明明是发送的put请求，个人估计在这种场景下，客户端发起的这个 OPTIONS 可以说是一个“预请求”，用于探测后续真正需要发起的跨域 POST 请求对于服务器来说是否是安全可接受的，因为跨域提交数据对于服务器来说可能存在很大的安全问题。这里提一下，很多异步ajax上传文件的插件在上传前都会先发送一个OPTIONS请求，比如jQueryfileupload 插件。

    2、我设置成GET，发现POST请求照样能通过，设置成POST，GET也能通过，暂时不清楚，希望知道的能给我解答。

    4、设置Access-Control-Allow-Methods

    标准的CORS请求不对cookies做任何事情，既不发送也不改变。如果希望改变这一情况，就需要将withCredentials设置为true。
    另外，服务端在处理这一请求时，也需要将Access-Control-Allow-Credentials设置为true。
    withCredentials属性使得请求包含了远程域的所有cookies，但值得注意的是，这些cookies仍旧遵守“同域”的准则，因此从代码上你并不能从document.cookies或者回应HTTP头当中进行读取。

    简而言之，withCredentials：true 那么 Access-Control-Allow-Credentials：true，反之不成立。
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    $.ajax({ url:'get',102); Box-sizing: border-Box;">(data){ console.log(data); },xhrFields: { withCredentials: true } });
  • 1
  • 2
  • 3
  • 4
  • 5
    • 1
    • 2
    • 3
    • 4
    • 5
    <% "http://localhost:8080"); ); "Access-Control-Allow-Credentials",0); Box-sizing: border-Box;">"true"); %>

    CROS差不多讲完了，一般解决实际问题的时候，都是设置上面三个属性。当然还有Access-Control-Request-Headers等等可以设置，这就需要你十分了解HTTP协议啦。

    之后可能另外再开一个跨域异步文件上传以及Tomcat跨域问题的解决方案，涉及到crossdomain.xml，有兴趣的可以先去了解了解。

    关于Ajax跨域问题之CORS的更多相关文章

    1. ios – 尝试向我们分配IP而不是localhost或home时,NSURLSession失败

      我有一台本地运行的服务器(我的IP是192.168.0.98),并且已经尝试使用一些网络代码来访问它.最初这是通过AFNetworking完成的,但我现在用这样的NSURLSession完成了它：然后我用这3个URL运行它：>http：//localhost：8080/api–>作品.>http://127.0.0.1:8080/api–>作品.>http://192.168.0.98:8080/

    2. 通过AFNetworking 2.0上传iOS图像

      我一直在寻找新的AFNetworking2.0上传图像的例子.但是我正在撞墙,无法弄清楚代码有什么问题.所以这是我使用的代码TIA解决方法我最终使用了多部分请求

    3. ios – 在Objective-C中发送分块的HTTP 1.1请求

      我有以下问题：我正在创建一个非常大的SOAP请求(数据是一个编码为Base64字符串的视频),因此我不能将其作为原始SOAP请求发送,而是需要在HTTP1.1块中发送它.我似乎无法弄明白该怎么做.我在这里使用了代码：WhatarealternativestoNSURLConnectionforchunkedtransferencoding但它似乎没有做我认为应该做的事情–我可以看到请求作为单个请求

    4. 尝试更改Bool属性时,ios – EXC_BAD_ACCESS错误

      我正在尝试更改Bool属性并且收到一个EXC_BAD_ACCESS错误.我正在使用XCode6和Swift.note属性保存不错,但已完成的属性会抛出EXC_BAD_ACCESS错误改变属性程序解决方法有同样的问题,解决方案确实是在@NSManaged属性中使用NSNumber.此外,您可以定义一个计算的Bool属性,以便您可以使用业务逻辑中的标量布尔值,而不能使用NSNumber.

    5. ios – Swift2.0 HTTP请求无法正常工作

      参见英文答案>TransportsecurityhasblockedacleartextHTTP23个HelloStackoverflow,我将swift应用程序移动到Swift2.0后,我不断收到此错误：我看了下面的链接https://forums.developer.apple.com/thread/5835并将以下代码添加到我的info.plist中它仍然不起作用,任何人都有替代解决方案？解

    6. iOS 10.3：模拟器HTTPS localhost：SSL错误

      这适用于iOS10.2及更低版本,但升级到10.3后,当模拟器尝试通过HTTPS连接到运行在localhost上的开发服务器时,Xcode控制台会输出以下错误：打印出URLSessionDataTask返回的错误显示：参考：Apple:Developer:GuidesandSampleCode:TechnicalNoteTN2232:HTTPSServerTrustEvaluation要创建自签名

    7. 应用程序关闭时的iOS任务

      我正在构建一个应用程序,通过ajax将文件上传到服务器.问题是用户很可能有时不会有互联网连接,并且客户希望在用户重新连接时安排ajax调用.这可能是用户在离线时安排文件上传并关闭应用程序.应用程序关闭时可以进行ajax调用吗？

    8. 如何在Swift语言中创建http请求

      概述：本文通过实例从同步和异步两种方式上回答了”如何在Swift语言中创建http请求“的问题。如果你对Objective-C比较了解的话，对于如何创建http请求你一定驾轻就熟了，而新语言Swift与其相比只有语法上的区别。但是，对才接触到这个崭新平台的初学者来说，他们仍然想知道“如何在Swift语言中创建http请求？”。在这里,我将作出一些建议来回答上述问题。常见的创建http请求的方式主要

    9. Swift HTTP请求集合

      )->Voidinprintln})带参数的get请求varrequest=HTTPTask()request.GET("http://google.com",parameters:["param":"param1","array":["firstarrayelement","second","third"],"num":23],arial;font-size:14px;line-height:21px">println("response:\(response.responSEObject!)")POS

    10. swift 自带HTTP请求

      )->Voidiniferror!=nil{println(error)}else{println(data)}}funcHTTPGet(url:String,callback:(String,String?)->Void){varrequest=NSMutableuRLRequest(URL:NSURL(string:url)!)HTTPsendRequest(request,callback)}funcHTTPsendRequest(request:NSMutableuRLRequest,callba

    随机推荐

    1. xe-ajax-mock 前端虚拟服务

      最新版本见Github，点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件；对于前后端分离的开发模式，ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装，XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js，更小的压缩版本，可以带来更快的速度体验。

    2. vue 使用 xe-ajax

      安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装，VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js，更小的压缩版本，可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

    3. AJAX POST数据中文乱码解决

      前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

    4. Koa2框架利用CORS完成跨域ajax请求

      实现跨域ajax请求的方式有很多，其中一个是利用CORS，而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的，最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止，相当于仅仅完成了预检，还没发送真正的请求呢。

    5. form提交时，ajax上传文件并更新到&lt;input&gt;中的value字段

    6. ajax的cache作用

      filePath="+escape;},error:{alert;}});解决方案：1.加cache:false2.url加随机数正常代码：网上高人解读：cache的作用就是第一次请求完毕之后，如果再次去请求，可以直接从缓存里面读取而不是再到服务器端读取。

    7. 浅谈ajax上传文件属性contentType = false

      默认值为contentType="application/x-www-form-urlencoded".在默认情况下，内容编码类型满足大多数情况。在这里，我们主要谈谈contentType=false.在使用ajax上传文件时：在其中先封装了一个formData对象，然后使用post方法将文件传给服务器。说到这，我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗？这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

    8. 909422229_ajaxFileUpload上传文件

      ajaxFileUpload.js很多同名的，因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来，以后不用到处找了。语法：$.ajaxFileUploadoptions参数说明：1、url上传处理程序地址。2，fileElementId需要上传的文件域的ID，即的ID。3，secureuri是否启用安全提交，默认为false。4，dataType服务器返回的数据类型。6，error

    9. AJAX-Cache：一款好用的Ajax缓存插件

      原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段，在频繁的异步请求业务中，我们往往需要利用“缓存”提升界面响应速度，减少网络资源占用。AJAX-Cache是一款jQuery缓存插件，可以为$.ajax()方法扩展缓存功能。

    10. jsf – Ajax update/render在已渲染属性的组件上不起作用

      我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的，我该如何解决呢？必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位，那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

    返回
    顶部