跨域问题解决方案

1.1、用form表单提交数据来解决跨域问题 

用js处理form表单提交,通过动态给form元素赋值,来进行设置接口地址。在form标签上写入这就代码 enctype="multipart/form-data" :这句代码指定form表单提交时的编码格式为utf-8. 通过用一个隐藏的 iframe标签,用target="hidden_frame",来解决form表单提交时跳转页面的问题。

1.2、post跨域解决方案

需要前后端配合设置解决跨域问题,后端需要做的是开启CORS,允许特定域名进行跨域访问。

当你使用XMLHttpRequest发送请求时,浏览器发现该请求不符合同源策略,会给该请求加一个请求头:Origin,后台进行一系列处理,如果确定接受请求则在返回结果中加入一个响应头:Access-Control-Allow-Origin;浏览器判断该相应头中是否包含Origin的值,如果有则浏览器会处理响应,我们就可以拿到响应数据,如果不包含浏览器直接驳回,这时我们无法拿到响应数据。如下图

(1)、zepto ajax提交 代码如下
$.ajax({
type: 'post',
url: url,
data:{
'selfSummary':S.one(".form-control").val(),
'merchantCode':'160315133351031001',
},
contentType:'application/x-www-form-urlencoded;charset=UTF-8',
success: function(data){
console.log(JSON.parse(data));
//this.append(data.project.html)
},
error: function(xhr, type){
alert('Ajax error!')
}

解析:contentType:'application/x-www-form-urlencoded;charset=UTF-8', 这句代码如果没有,可以 进行跨域提交,但会出现中文汉字乱码问题;application/x-www-form-urlencoded 可以进行跨域请 求;charset=UTF-8 设定编码格式,如果没有则会乱码。

(2)、KISSY post提交
S.IO({
type:'post',
url: 'https://dev.teenker.com/iteenker-business- center/teenker/merchant/businessCard/update.html',
data:{
'selfSummary':S.one(".form-control").val(),
'merchantCode':'160315133351031001',
"cc":{"sdf":1,"sdf":2},
},
crossDomain:true,
contentType:'application/x-www-form-urlencoded;charset=UTF-8',
success:function(responseData){
console.log(responseData);
},
error:function(responseData){
Notification.simple("请求失败,请稍后再试",'',2000);
}
});

解析:crossDomain:true, 表示允许跨域;

CORS的本质让服务器通过新增响应头Access-Control-Allow-Origin,通过HTTP方式来实现资源 共享,让每个请求的服务直接返回资源.它使用了HTTP交互方式来确定请求源是否有资格请求该资 源,并且通过设置HTTP Header来控制访问资源的权限.

时间: 2024-12-27 13:35:48

跨域问题解决方案的相关文章

JS postMessage跨域请求解决方案

    今天看到一篇非常好的文章,忍不住想转载过来,亲自测试了一下,解决了web开发中我们经常遇到最头痛的跨域请求的问题.文章主要是介绍了HTML5 postMessage 和 onmessage API 详细应用,比较长,我只截取了跨域请求解决方案的一部分,想查看全文的人可以去查看原文.   Cross-document messaging 简介 由于同源策略的限制,JavaScript 跨域的问题,一直是一个颇为棘手的问题.HTML5 提供了在网页文档之间互相接收与发送信息的功能.使用这个功

js中实现浏览器跨域访问解决方案

跨域的概念 跨域大家都知道,不同地址,不同端口,不同级别,不同协议都会构成跨域.例如:about. www.111cn.net和www.你的域名都会构成跨域.总结起来只要协议.域名.端口有任何一个不同,都被当作是不同的域.下面举例,每两个一组. URL                      说明       是否允许通信 http://www.你的域名/a.js http://www.你的域名/b.js     同一域名下   允许 http://www.你的域名/lab/a.js http

Cookie跨域操作解决方案

Cookie跨域操作看来是个简单的问题,因为只要指定Domain属性为指定网站的根域名就可以了. 但是笔者在实际使用过程中却遇到了一些问题,的确值得注意. 环境介绍 cookie在www主域名下创建,并写入Domain属性,如:(为方便调试以下代码皆为asp代码) Write.asp <% Response.Cookies(CookieName)("UserName") = "SunBird" Response.Cookies(CookieName)(&quo

Javascript跨域访问解决方案

由于安全方面的考虑,Javascript被限制了跨域访问的能力,但是有时候我们希望能够做一些合理的跨域访问的事情,那么怎么办呢? 这里分两类情况: 一.基于同一父域的子域之间页面的访问 参见如下3个domain域: 1.taobao.com 2.jipiao.taobao.com 3.promotion.taobao.com 它们有相同的父域 taobao.com 二.基于不同父域页面之间的访问 参见如下3个domain域: 1.taobao.com 2.baidu.com 3.sina.com

Javascript 跨域访问解决方案_javascript技巧

这里分两类情况:一.基于同一父域的子域之间页面的访问:参见如下3个domain域:taobao.com.jipiao.taobao.com.promotion.taobao.com:它们有相同的父域taobao.com.二.基于不同父域页面之间的访问:参见如下3个domain域:taobao.com.baidu.com.sina.com.cn:它们具有不同的父域. 解决它们之间跨域的方案有:方案1:服务器Proxy域A的页面JS需要访问域B下的链接获取数据,该方案在域A的服务器端建立一个Prox

ajax跨域问题解决方案

今天来记录一下关于ajax跨域的一些问题.以备不时之需. 跨域 同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性.也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同.这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作. 解决方式 通常来说,比较通用的有如下两种方式,一种是从服务器端下手,另一种则是从客户端的角度出发.二者各有利弊,具体要使用哪种方式还需要具体的分析. 服务器设置响应头 服务器代理 客户端采用脚本回调机制. 方式一 Access-C

JS跨域解决方案之使用CORS实现跨域_javascript技巧

引言        跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免的需要进行跨域操作,所以跨域能力也算是前端工程师的基本功之一. 和大多数跨域的解决方案一样,JSONP也是我的选择,可是某天PM的需求变了,某功能需要改成支持POST,因为传输的数据量比较大,GET形式搞不定.所以折腾了下闻名已久的CORS(跨域资源共享,Cross-Origin

Ajax跨域请求 JSON JSONP

同源策略和跨域-总结 目录: 1.同源策略 2.跨域 3.几种跨域技术   1.同源策略 什么叫同源? URL由协议.域名.端口和路径组成,如果两个URL的协议.域名和端口相同,则表示他们同源.相反,只要协议,域名,端口有任何一个的不同,就被当作是跨域. e.g. 对于http://store.company.com/dir/page.html进行同源检测: URL 结果 原因 http://store.company.com/dir2/other.html 成功 仅路径不同 http://st

js跨域的研究

在开发中总是会遇到,接入层可能去调用其它域名下服务的api,crud数据,可是在这中间会出现js的同源策略,导致同一个DOM不能用多个源加载数据,已确保安全性. 在数据远程调用的设计时候,要考虑性能又要考虑安全性,下边为总结的跨域三种实现: 1:使用ACAO('Access-Control-Allow-Origin')设置响应头域名访问-->问题低版本的ie(10及以下)和个别浏览器并不支持. 2:使用jsonp实现跨域数据请求,可以但是,所有的请求会过滤成GET请求,如果安全数据的读写,有不安