跨域问题解决方案

简介:

1.1、用form表单提交数据来解决跨域问题 
用js处理form表单提交,通过动态给form元素赋值,来进行设置接口地址。在form标签上写入这就代码 enctype="multipart/form-data" :这句代码指定form表单提交时的编码格式为utf-8. 通过用一个隐藏的 iframe标签,用target="hidden_frame",来解决form表单提交时跳转页面的问题。
1.2、post跨域解决方案
需要前后端配合设置解决跨域问题,后端需要做的是开启CORS,允许特定域名进行跨域访问。 厅客web前端技术总结

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

(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来控制访问资源的权限.
相关文章
|
9月前
|
前端开发 JavaScript 安全
跨域的五种最常见解决方案
跨域的五种最常见解决方案
128 0
|
Web App开发 JSON 前端开发
前端跨域解决方案-汇总
前端跨域解决方案-汇总
172 0
|
9月前
|
JSON 前端开发 安全
前端开发中的跨域问题及解决方案
在前端开发中,跨域是一个常见但又令人头疼的问题。本文将深入探讨跨域产生的原因以及一些常见的解决方案,帮助开发者更好地理解和处理跨域情况。
|
4月前
|
JavaScript 前端开发 安全
跨域解决方案有哪些?
本文介绍了多种跨域解决方案,包括JSONP、CORS、postMessage、WebSocket、document.domain+iframe、window.name、location.hash、Node.js代理、Nginx代理和CORS Anywhere。每种方法都有其适用场景和优缺点,如JSONP简单但只支持GET请求,CORS安全但兼容性稍差,WebSocket适用于实时通信但需服务器支持。开发者可根据具体需求选择合适的跨域方案。
77 3
跨域解决方案有哪些?
|
4月前
|
JSON 前端开发 安全
跨域问题产生的原因以及解决方案
【10月更文挑战第9天】跨域问题是前端开发中不可避免的一个问题,了解其产生的原因以及掌握多种解决方案是非常重要的。在实际应用中,需要根据项目的具体情况和需求,选择合适的解决方案,并不断关注跨域问题的发展趋势,以便及时应对新的挑战。
|
7月前
|
存储 前端开发 JavaScript
跨域问题以及解决方案
跨域问题以及解决方案
95 0
|
移动开发 前端开发 JavaScript
前端跨域的解决方案?
前端跨域的解决方案?
121 0
|
9月前
|
运维 前端开发 JavaScript
关于跨域,和跨域问题的完整解决方案
关于跨域,和跨域问题的完整解决方案
78 0
|
移动开发 JavaScript 前端开发
前端常见跨域解决方案(全)
前端常见跨域解决方案(全)
892 0
|
移动开发 前端开发 安全
【前端跨域的解决方案?】
【前端跨域的解决方案?】

热门文章

最新文章