Ajax跨域问题

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

后台的跨域设置:

前台form表单提交:

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

访问正常

 

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

1. 跨域请求用于什么环境?解决方式?
2. 跨域指浏览器不能执行其他网站的脚本,是由于浏览器的同源策略造成的,浏览器施加的安全策略; 同源是网络协议,域名,端口均相同
3. 网络协议,域名,端口只要有一个不同,即为跨域

如: ​​

请注意：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属一种数据交互方式