ajax提交不能进入后台_Ajax跨域问题

本文介绍了在表单提交时遇到的Ajax跨域问题及其解决方法。通过添加特定属性,配合后台CORS设置,解决了跨域请求。同时提到了JSONP只适用于GET请求,而CORS则支持POST等更丰富的请求方式。
摘要由CSDN通过智能技术生成

今天写表单提交时候遇到个问题, 每次提交都提示是跨域的问题,捣鼓了半天,发现少了个属性

3eb07a2ea4c37de14be79466dece2062.png

后台的跨域设置:

e6d87c5ddd822893a22bcf131964e289.png

前台form表单提交:

f23c1907bb5475bc0bb1054123c0ef51.png

解决方式: 在表单提交时候加2个属性

951fe6424728fb03e2a534e91b44e8bd.png

访问正常

解决跨域请求问题,首先了解什么是跨域

  1. 跨域请求用于什么环境?解决方式?

  2. 跨域指浏览器不能执行其他网站的脚本,是由于浏览器的同源策略造成的,浏览器施加的安全策略; 同源是网络协议,域名,端口均相同

  3. 网络协议,域名,端口只要有一个不同,即为跨域

如:536c095697a63368aaef5a975b7bdcd4.png

请注意:localhost和127.0.0.1虽然都指向本机,但也属于跨域。

1.  使用jsonp解决跨域, ajax请求使用jsonp(发送请求是datatype:'jsonp')

但是要注意JSONP只支持GET请求,不支持POST请求。

2. 使用cros实现跨域调用 ,Cross-Origin Resource Sharing(CORS)跨域资源共享是一份浏览器技术的规范

response.setHeader("Access-Control-Allow-Credentials", "true");

response.setHeader("Access-Control-Allow-Origin", request.getHeader("origin"));

response.setContentType("application/x-javascript");

注: 使用后者时注意前台ajax提交时注意设置参数: xhrFields: {withCredentials: true},

它指示了是否该使用类似cookies,authorization headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制(cross-site Access-Control)请求。在同一个站点下使用withCredentials属性是无效的。(默认值是false)也会被用做响应中cookies 被忽视的标示。对同源请求没有影响

如果使用的option方式, 则需要添加另一个属性: crossDomain: true,即

var option = {
url: "url", //form提交数据的地址
type: 'post', //form提交的方式(method:post/get)
dataType: 'json', //服务器返回数据类型
target:'#ssss', //服务器返回的响应数据显示在元素(Id)号确定
xhrFields: {withCredentials: true},
crossDomain: true,
success: function (data) {}
}
$("#form").ajaxForm(option)

crossDomain主要是用于cors跨域ajax请求时使用的,这种跨域支持post等请求,需要服务端支持,返回的内容可以是标准的json。  

json是一种数据格式,而jsonp属一种数据交互方式

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值