这次给大家带来怎样用JS跨域实现POST,JS跨域实现POST的注意事项有哪些,下面就是实战案例,一起来看一下。
10年积累的网站制作、成都网站设计经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站制作后付款的网站建设流程,更有千山免费网站建设让你可以放心的选择与我们合作。
javascript 跨域是一个很常见的问题,其中 jsonp 是一个最常用的手段,但是 jsonp 只支持 get,不支持 post,所以如果想通过 jsonp 来 post 一些数据,就头大了。
此处通过在一个 iframe 中生成 form 表单的形式来实现 post,并通过 postMessage 来向调用者返回值。
第一步,我们先实现一个接受 jsonp 的后端代码,至于用什么语言实现,各位自已决定。
跨域是JavaScript出于安全方面的考虑,不允许浏览器在当前访问的域名的页面中的javascript的调用其他域名页面中的对象。
跨域请求就是为了解决禁止跨域访问的问题。
用jsonp的原因是json是javascript中的对象,而跨域访问中有图片、css、javascript脚本文件等是不限制,因此你可以在页面渲染时动态在script标签设置src路径,而这个路径返回回来的就是json对象。
JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下:
首先什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表:
特别注意两点:
第一,如果是协议和端口造成的跨域问题“前台”是无能为力的,
第二:在跨域问题上,域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。
“URL的首部”指window.location.protocol +window.location.host,也可以理解为“Domains, protocols and ports must match”。
跨域:
浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了.
实现方式:
基于script标签实现跨域
基于script标签实现跨域
基于jquery跨域
通过iframe来跨子域
XMLHttpRequest2 进行跨域访问时需要服务器许可,不是任何域都接受跨域请求的。先来看一下从 Yahoo YQL 域返回的响应头(Response Header ):
HTTP/1.1 200 OK
Set-Cookie: AO="o=1s=1dnt=1"; Version=1; Domain=yahoo.com; Max-Age=630720000; Expires=Sat, 18-Jun-2033 10:07:41 GMT; Path=/
Access-Control-Allow-Origin: *
Cache-Control: public, max-age=899
Content-Type: text/xml;charset=utf-8
Content-Encoding: gzip
Vary: Accept-Encoding
Date: Sun, 23 Jun 2013 10:07:40 GMT
注意里面有一条标识 Access-Control-Allow-Origin:* ,这就表示允许跨域访问,所以可以正常访问该域,而对于其他没有该标识的域就会出现禁止访问提示。
那么如何设置呢?如果要接受跨域访问请求,就必须在服务器端返回的资源中加入 Access-Control-Allow-Origin 头标识, Access-Control-Allow-Origin 的值可以是 URL 或 *,如果是 URL 则只会允许来自该 URL 的请求,* 则允许任何域的请求。比如,在 HTML 中可以设置:
meta http-equiv="Access-Control-Allow-Origin" content="*"
或
meta http-equiv="Access-Control-Allow-Origin" content=""