怎样解决浏览器跨域问题?

怎样解决浏览器跨域问题?JSONP解决跨域发送请求时动态创建一个Script标签,在Script标签中发出请求,通过这种变通的方式实现跨域。

大家好,欢迎来到IT知识分享网。
怎样解决浏览器跨域问题?"

JSONP解决跨域

发送请求时动态创建一个Script标签,在Script标签中发出请求,通过这种变通的方式实现跨域。非官方协议,而是前后端进行一个约定,约定请求的参数里边必须包含某个参数,比如callback,callback为页面JS函数名,函数参数就是后台需要返回的结果,例如:callback(“{\”pass\”:true}”).

JQUERY发送JSONP请求代码示例:

$.ajax({ url:"http://localhost:8080/getData/getSecondData", dataType:"jsonp", jsonp:"callback", success:function(json){ console.log(json); } }); 

CORS跨域解决方案

CORS解释

CORS是W3C标准,全名叫跨域资源共享Cross-origin resource sharing,允许浏览器向跨域服务器发出 XMLHttpRequest 请求。

简单请求

在做跨域请求资源的时候,会发现多了Origin字段,如下:

Origin: http://www.baidu.com

尝试修改后台代码:

request.addHeader("Access-Control-Allow-Origin","http://www.baidu.com");

此时就可以跨域了

预检命令

非简单请求需要先执行预检命令,因此跨域分为两类:

  • 简单请求,先执行请求,后判断

GET、HEAD、POST

  • 非简单请求,先发送预检命令

PUT、DELETE、带JSON参数的请求、自定义头的请求

在预检的时候,比如发送JSON,会设置header content-type:application/json,这个header是不被允许的,需要在后台设置:

request.addHeader(“Access-Control-Allow-Headers”, “Content-Type”)

另外,如果要自定义header头,也需要后台设置

携带cookie跨域请求

后台需要设置:

request.addHeader(“Access-Control-Allow-Credentials”,”true”);

发送请求时,需要设置XMLHttpRequest的withCredentials属性为true

自定义header头的请求

后台需要指定允许自定义头:

request.addHeader("Access-Control-Allow-Headers",headers);

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/59892.html

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信