文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

AJAX的跨域问题解决方案

2022-12-28 18:00

关注

跨域的概述

  1. 跨域是指从一个域名的网页去请求另一个域名的资源。比如从百度(https://baidu.com)页面去请求京东(https://www.jd.com)的资源。
  2. 通过超链接、form表单提交、window.location.href、document.location.href、script标签、img标签等方式进行跨域是不存在问题的。但在一个域名的网页中的一段js代码发送AJAX请求去访问另一个域名中的资源,由于同源策略的存在导致无法跨域访问,AJAX就存在这种跨域问题。
  3. 同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,同源就是协议、域名和端口都相同。

下面是使用AJAX发送请求跨域访问资源出现的问题:请求的资源上不存在“访问控制允许源”标头:(就是被同源策略阻止了)

区别同源与不同源

区分同源和不同源的三要素:

协议域名端口

协议一致,域名一致,端口号一致,三要素都要一致,才是同源,其它一律都是不同源。

同源策略有什么用?

如果你刚刚在网银输入账号密码,查看了自己还有一万 元块钱,紧接着访问一些不规矩的网站,这个网站可以访问刚刚的网银站点,并且获取账号密码,那后果可想而知。所以,从安全的角度来讲,同源策略是有利于保护网站信息的。

AJAX跨域解决方案

有一些情况下,我们是需要使用AJAX进行跨域访问的。比如某公司的A页面a.aresourse.com)有可能需要获取B页面b.bresourse.com)。

方案一、设置响应头

核心原理:跨域访问的资源允许你跨域访问。(被调用方允许你可跨域访问)

实现:

response.setHeader("Access-Control-Allow-Origin","http://localhost:8080/ajax/ajax7.html");//允许某个
response.setHeader("Access-Control-Allow-Origin","*");//允许所有

方案二、jsonp

jsonp:json with padding

jsonp可以解决跨域问题。
注意:jsonp解决跨域的时候,只支持GET请求。不支持post请求。这是因为jsonp本就是动态的创建script标签从而达到跨域的效果。

下面是动态创建的代码:

效果展示:

jQuery封装了jsonp,也就是说可以使用jQuery库去进行编写jsonp代码,方便。

核心代码如下:

$.ajax({
	type:"GET",
	url:"跨域的url",
	dataType:"jsonp",   //指定数据类型
	jsonp:"fun",    //指定参数名(不设置的时候,默认是”callback“)
	jsonpCallback:"sayHello"   //指定回调函数的名字,不设置的时候,jQuery会自动生成一个随机的回调函数,
	//并且这个回调函数还会自动调用success的回调函数
})

方案三、代理机制(httpclient)

“调用方”解决跨域的问题是这个思路的:让发送出去的请求代理成是本域的
如果资源是本域的,那就侧面地进行了跨域。

使用Java程序怎么去发送get/post请求呢?【GET和POST请求就是HTTP请求】

总结

到此这篇关于AJAX的跨域问题解决的文章就介绍到这了,更多相关AJAX跨域问题内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯