如何解决跨域问题

唐钰Yo

已于 2022-11-28 18:08:31 修改

阅读量75

点赞数

分类专栏： JS 文章标签： json 前端 javascript

于 2022-11-23 00:26:27 首次发布

本文链接：https://blog.csdn.net/weixin_50543490/article/details/127992595

版权

JS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、jsonp

原理:动态创建一个script标签。利用script标签的src属性不受同源策略限制。因为所有的src属性和href属性都不受同源策略限制。可以请求第三方服务器数据内容。

步骤

1.1)去创建一个script标签

1.2)script的src属性设置接口地址

1.3)接口参数,必须要带一个自定义函数名要不然后台无法返回数据。

1.4)通过定义函数名去接收后台返回数据

//去创建一个script标签

var script=documentcreateElement("script");

//script的src属性设置接口地址并带一个callback回调函数名称

script.src="http://127.0.00:8080/index?callback=jsonpCallback";//插入到页面

document.head.appendChild(script);

//通过定义函数名去接收后台返回数据function jsonpCallback(data)

//注意 jsonp 返回的数据是 json 对象可以直接使用

//Ajax取得数据是json字符串需要转换成json对象才可以使用。

2、CORS:跨域资源共享

原理:服务器设置Access-Control-Allow-OriginHTTP响应头之后，浏览器将会允许跨域请求

限制:浏览器需要支持HTML5，可以支持POST，PUT等方法兼容ie9以上需要后台设置

Access-Control-Allow-Origin:* //允许所有域名访问，或者

Access-Control-Allow-Origin:HTTP://a.com //只允许所有域名访问