ajax跨域问题(三种解决方案)

ajax跨域问题(三种解决方案)

为什么会出现跨域

    跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的,html本身没有跨域问题,比如a标签、script标签、甚至form标签(可以直接跨域发送数据并接收数据)等

如何解决跨域问题

    JSONP
      JSONP是JSON with Padding的略称。它是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。关于jsonp的使用方式,可以参考http://blog.csdn.net/alen1985/article/details/6365394,优缺点可以参考http://blog.csdn.net/z69183787/article/details/19191385  
    添加响应头,允许跨域
      addHeader(‘Access-Control-Allow-Origin:*’);//允许所有来源访问
      addHeader(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式
    代理的方式
    服务器A的test01.html页面想访问服务器B的后台action,返回“test”字符串,此时就出现跨域请求,浏览器控制台会出现报错提示,由于跨域是浏览器的同源策略造成的,对于服务器后台不存在该问题,可以在服务器A中添加一个代理action,在该action中完成对服务器B中action数据的请求,然后在返回到test01.html页面。

Demo1(添加允许跨域请求的响应头)

    html页面

    Web后台

    按照上面的访问,由于127.0.0.1:8080和localhost:8081的域和端口不同,所以同样会出现跨域问题。

现在用添加响应头的方式

Demo2(jsonp的callback方式)

这里演示的是jquery的ajax,后台采用的是webservice接口形式

注意此时的dataType为jsonp格式,看看后台的接收

我们返回的其实就是一个函数的调用文本,这里注意,callback的名称,由于前台没有指定callback函数,所以这里自动生成了,如果想自定义回调函数名称如下操作,添加一行请求参数

这样后台的回调函数名就变成了mytest

浏览器发出的请求格式和响应数据如下,其实就是返回函数的调用,而需要返回的数据则以函数参数值的形式填入

此时控制台就能够获取到“hello world”

推荐参考资料:
http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html
———————
作者:吴渣渣
来源:CSDN
原文:https://blog.csdn.net/u014727260/article/details/72793459
版权声明:本文为博主原创文章,转载请附上博文链接!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/112550.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • cms开源网站管理系统_javaweb开源商城

    cms开源网站管理系统_javaweb开源商城笔者整理了八款.Net优秀的开源CMS内容管理系统,推荐给广大的.net开发者。

    2022年8月6日
    4
  • mac系统安装win10双系统「建议收藏」

    mac系统安装win10双系统「建议收藏」一个月前,为了在家里学习单片机,在macbookair系统基础上,安装了win10,搞了一个双系统。在安装之前,看了很多资料,基本上提到两点,一个是准备win10镜像,一个是准备win10安装启动程序,而且至少需要一个U盘,有的也说需要两个,一个用来装win10镜像,一个用来装win10启动程序。最后动手安装的时候,一个U盘也没有使用,直接把win10镜像下载到mac系统中,然后启动mac上的磁盘管理工具,按照提示,傻瓜式的进行下一步。有两个地方需要我们手动设…

    2022年9月27日
    7
  • 关于CultureInfo

    关于CultureInfoCultureInfo提供有关特定区域性的信息(如区域性的名称、书写系统和使用的日历)以及如何设置日期和排序字符串的格式。在ASP.NET2.0中提供多语言转换和多样式主题转换功能中,经常用到CultureInfo.可用CultureInfo.Name获得区域性名称,CultureInfo的默认是.NETFramework的安装版本。改变CultureInfo值方法为可在Global….

    2022年6月19日
    29
  • 光纤交换机zone配置

    光纤交换机zone配置一、CentOS下查看PortName1、命令cat/sys/class/fc_host/host[N]/port_state,显示online则证明链路状态正常2、命令cat/sys/class/fc_host/host[N]/port_name,获取客户端HBA卡PortName二、AIX下查看WWNName1、查看系统中有效的光纤卡$lsdev-Ccadapter-Sa|grepfcs3、查看光纤卡WWNName$ls…

    2022年5月11日
    73
  • jQuery和Vue的区别[通俗易懂]

    jQuery和Vue的区别[通俗易懂]1.jQuery首先要获取到dom对象,然后对dom对象进行进行值的修改等操作2.Vue是首先把值和js对象进行绑定,然后修改js对象的值,Vue框架就会自动把dom的值就行更新。3.可以简单的理解为Vue帮我们做了dom操作,我们以后用Vue就需要修改对象的值和做好元素和对象的绑定,Vue这个框架就会自动帮我们做好dom的相关操作4.这种dom元素跟随JS对象值的变化而变化叫做单向数据绑…

    2022年10月16日
    4
  • Java和C语言有什么区别?[通俗易懂]

    Java和C语言有什么区别?[通俗易懂]Java和C语言作为现在行业中经常被人提起的两种语言,有很大的区别。选择不同的语言学习以后的发展也会大不相同,那么Java和C语言有什么区别呢?现在学哪种语言更合适呢?从概念上看,C语言是一门面向过程、抽象化的通用程序设计语言;Java是一门面向对象编程语言,而Java语言是从C语言衍生而来,它吸收了C++语言的各种优点,并且摒弃了C++里难以理解的多继承、指针等概念。从概念可以看出C语言相当…

    2022年7月7日
    20

发表回复

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

关注全栈程序员社区公众号