河南新乡市建设银行网站,丽江建设信息网站,网站定位方案,企业网站建立制作Web应用是一种极大方便用户的操作界面#xff0c;数据维护技术Ajax也从中脱颖而出#xff0c;ThingJS采用了Ajax的数据维护能够形成轻量化的开发流程。为什么Ajax通过XHR 实现Ajax 通信的一个主要限制#xff0c;来源于跨域安全策略。默认情况下#xff0c;XHR 对象只能访问…Web应用是一种极大方便用户的操作界面数据维护技术Ajax也从中脱颖而出ThingJS采用了Ajax的数据维护能够形成轻量化的开发流程。为什么Ajax通过XHR 实现Ajax 通信的一个主要限制来源于跨域安全策略。默认情况下XHR 对象只能访问与包含它的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为。但是实现合理的跨域请求对开发某些浏览器应用程序也是至关重要的。它允许浏览器向跨域的服务器发出 XMLHttpRequest 请求从而解决了 Ajax 跨域请求数据的问题。CORS标准CORSCross-Origin Resource Sharing跨源资源共享是W3C 的一个工作草案定义了在必须访问跨源资源时浏览器与服务器应该如何沟通。CORS 背后的基本思想就是使用自定义的HTTP 头部让浏览器与服务器进行沟通从而决定请求或响应是应该成功还是应该失败。比如一个简单的使用GET 或POST 发送的请求它没有自定义的头部而主体内容是text/plain。在发送该请求时需要给它附加一个额外的Origin 头部其中包含请求页面的源信息协议、域名和端口以便服务器根据这个头部信息来决定是否给予响应。下面是Origin 头部的一个示例Origin: http://www.nczonline.net如果服务器认为这个请求可以接受就在Access-Control-Allow-Origin 头部中回发相同的源信息如果是公共资源可以回发*。例如Access-Control-Allow-Origin: http://www.nczonline.net如果没有这个头部或者有这个头部但源信息不匹配浏览器就会驳回请求。正常情况下浏览器会处理请求。注意请求和响应都不包含cookie 信息。CORS通信过程对于前端而言整个 CORS 通信过程由浏览器自动完成。对于开发者来说前端代码与普通 Ajax 代码完全一样。实现 CORS 的关键是后端需在服务端设置 response 响应头header的 Access-Control-Allow-Origin 属性就可以开启 CORS。该属性表示哪些域名可以访问资源如果设置通配符则表示所有网站都可以访问资源例如Access-Control-Allow-Origin, * //所有网站都可访问
// 仅ThingJS网站能访问
// Access-Control-Allow-Origin,http://www.thingjs.com如果 CORS 请求不是简单的跨站请求如· 使用GET或POST以外的HTTP请求方法PUT DELETE等· 请求的Content-Type 不属于以下三种之一· application/x-www-form-urlencoded· text/plain· multipart/form-data· 发送了自定义的请求头信息如Token数据。那么还需根据实际情况在服务器的响应头中设置 Access-Control-Allow-Headers 和Access-Control-Allow-Methods 相关属性值例如浏览器 Ajax 请求为$.ajax({headers: {token: 31415926// 请求头中带上了token数据},url: http://localhost:3000/getDataByIds,type: POST,//发送数据到服务器时所使用的内容类型。默认是application/x-www-form-urlencoded 但此方式无将复杂的 JSON 组织成键值对形式//因此设置 contentType 为application/json; charsetutf-8,这种类型是文本类型contentType: application/json; charsetutf-8,dataType: json,//发送到服务器的数据 由于contentType设置为application/json; charsetutf-8这里需将json对象转为字符串后发送data: JSON.stringify({ ids: [1, 2, 3] }),success: function (data) {console.log(data);}
});
则服务端需要设置
//配置允许的请求方式如果写 * 则都允许
Access-Control-Allow-Methods,PUT,POST,GET,DELETE,OPTIONS;
//配置允许的自定义请求头如果写 * 则都允许
Access-Control-Allow-Headers, Content-Type,Token 使用Ajax数据维护方式需要了解浏览器、服务器和技术的组合方式ThingJS的数据接入方法把代码变得更加简单边用边学
