http://www.cnblogs.com/sunxucool/p/3433992.html

为什么会出现跨域
跨域问题来源于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”

---------------------
作者:吴渣渣
来源:CSDN
原文:https://blog.csdn.net/u014727260/article/details/72793459?utm_source=copy
版权声明:本文为博主原创文章,转载请附上博文链接!

ajax解决跨域的更多相关文章

  1. ajax解决跨域方法(适用于自己写接口解决跨域)

    原因是这样的:最近用PHP开发了一个网站,这个网站需要提供接口,接口开发完成之后,在本地进行请求,跨域测试. jsonp处理跨域和用PHP函数来处理跨域就不说了. 现在说的使用用 header 这个来 ...

  2. jq+jsonp+ajax解决跨域问题

    Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料. 关于Jsonp更详细的资料请参考http://baike.baidu.com/ ...

  3. ajax解决跨域问题

    1.在介绍之前先介绍几个概念 json: { date: "Sun Dec 24 21:44:42 CST 2017", temperature: "21", ...

  4. 解决Ajax不能跨域的方法

    1.  Ajax不能跨域请求的原因 同源策略(Same Origin Policy),是一种约定,该约定阻止当前脚本获取或者操作另一个域下的内容.所有支持Javascript的浏览器都支持同源策略,也 ...

  5. Ajax 是什么?Ajax 的交互模型?同步和异步的区别?如何解决跨域问题?以及 HTTP状态码

    一.Ajax 是什么: 1. 通过异步模式,提升了用户体验 2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用 3. Ajax 在客户端运行,承担了一部分本来由服务器承担的工作 ...

  6. ajax 、ajax的交互模型、如何解决跨域问题

    1.ajax是什么? — AJAX全称为“AsynchronousJavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术. — 不是一种新技 ...

  7. js中ajax如何解决跨域请求

    js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操 ...

  8. HTML5下通过response header解决跨域AJAX cookie的问题

    ajax: 通过给Response Header添加Access-Control-Allow-Origin:*  来解决跨域请求,*代表允许所有的跨域请求,或者把*换成指定的域名 cookie: 服务 ...

  9. AJAX跨域问题解决方法(3)——被调用方解决跨域

    被调用方解决跨域是指在HTTP响应头中增加指定的字段,允许调用方调用 可以在两种地方增加1.apache/nginx(HTTP服务器)2.tomcat(应用服务器) 浏览器如何判断跨域?仔细观察可以发 ...

随机推荐

  1. js 中class选择器,addClass,removeClass,hasClass,toggleClass,getByClass

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  2. HTML(二)选择器

    1.id选择器 一对一关系 <div id="only">123</div> #only{ background-color:black; } 2.clas ...

  3. MarkDown编辑器中缩进

    首先,Markdown是不支持缩进的. 在Markdown里按下四个空格,就自动转入Code模式. 在Markdown里一个回车,不是分段而是换行,要两个回车,才是分段. 分段和换行的区别是:换行后, ...

  4. PE文件 01 导入表

    0x01  导入表结构  数据目录表中的第二个成员标记了导入表的RVA和Size大小,由此可以定位到导入表: typedef struct _IMAGE_DATA_DIRECTORY { DWORD ...

  5. 强化学习10-Deep Q Learning-fix target

    针对 Deep Q Learning 可能无法收敛的问题,这里提出了一种  fix target 的方法,就是冻结现实神经网络,延时更新参数. 这个方法的初衷是这样的: 1. 之前我们每个(批)记忆都 ...

  6. 『转』android官网翻译好的蓝牙API接口说明

    Develop API Guides 连接 蓝牙 本文内容 基础知识 蓝牙权限 设置蓝牙 查找设备 查询配对的设备 发现设备 连接设备 连接为服务器 连接为客户端 管理连接 使用配置文件 供应商特定的 ...

  7. php优秀框架codeigniter学习系列——CI_Utf8类

    CI_Utf8类用来对Utf8编码环境提供支持.(Provides support for UTF-8 environments). 从构造函数看,只有当开启了PCRE模式,加载了iconv或者mbs ...

  8. display总结 overflow知识

    # display总结:# inline总结: # 1.同行显示, 就相当于纯位文本, 当一行显示不下, 如就是一字显示不下, 那么显示不下的那个字会自动换行;# 和纯文本的区别就是有纯文本的概念, ...

  9. PMP基本概念

    项目是为创造独特的产品,服务或成果而进行的临时性的工作.项目的三个特点是:临时,独特,渐进明细. 运营是遵循组织有流程的重复性工作. 项目组合是为了实现战略目标而组合在一起管理的项目,项目集,子项目组 ...

  10. Makefile内置变量,递归式变量,直接展开式变量,条件赋值,追加赋值

    将shell命令的输出赋值给变量: VALUE = $(shell   命令) Makefile中给变量赋值: =     是递归展开式变量 value1 = 5 value2 = $(value1) ...