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. python3 爬取简书30日热门,同时存储到txt与mongodb中

    初学python,记录学习过程. 新上榜,七日热门等同理. 此次主要为了学习python中对mongodb的操作,顺便巩固requests与BeautifulSoup. 点击,得到URL https: ...

  2. [整理]Kadane算法

    仅能操作一次时,需每次观察是否有为负情况置零.多次操作时,仅需判断是否后者大于前者. leetcode 53.121.122 [代码] class Solution { public int maxS ...

  3. 关于netcore 发布到服务器的准备

    1.先cmd到指定的网站目录, 然后执行 dotnet xxx.dll, 浏览器查看 localhost:5000 确认没有问题之后才去部署到iis

  4. 6.1 C++ string类型变量的定义以及输入与输出

    参考:http://www.weixueyuan.net/view/6389.html 总结: 在C++中提供了一个型的内建数据类型string,该数据类型可以替代C语言中char数组. 与C风格的c ...

  5. heightchart配置详解

    <div id="container" style="width: 100%; margin: 0 auto"></div><sc ...

  6. js 循环遍历数组

    var a =[1,3,4]; a.each(functiom{ .... }) or for (var x in a ){ .... }

  7. Xilinx FFT IP v9.0 使用(一)

    reference:https://blog.csdn.net/shichaog/article/details/51189711 https://blog.csdn.net/qq_36375505/ ...

  8. easyui datagrid 首次不加载做法

    我们一般遇到首次不执行查询,只有你点击查询按钮才查询的功能 我使用easyui的datagird做法是这样的: onBeforeLoad: function (param) { var firstLo ...

  9. spring的官方文档地址

    https://docs.spring.io/spring/docs/current/spring-framework-reference/

  10. 从SharePoint 2013迁移到SharePoint Online - 评估工具

    博客地址:http://blog.csdn.net/FoxDave 今天想跟大家分享一款从SharePoint 2013迁移到SharePoint Online时的评估工具:SharePoint ...