</div>
<div class="article-info-box">
<div class="article-bar-top d-flex">
<span class="time">2017年05月28日 17:23:11</span>
<div class="float-right">
<span class="read-count">阅读数：49358</span>
</div>
</div>
</div>
</div>
</div>
<article>
<div id="article_content" class="article_content clearfix csdn-tracking-statistics" data-pid="blog" data-mod="popu_307" data-dsm="post">
<div class="markdown_views">
<h3 id="为什么会出现跨域"><a name="t0"></a>为什么会出现跨域</h3>
- 跨域问题来源于JavaScript的同源策略，即只有 协议+主机名+端口号 (如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的，html本身没有跨域问题，比如a标签、script标签、甚至form标签（可以直接跨域发送数据并接收数据）等
ajax跨域问题（三种解决方案
如何解决跨域问题
-
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页面
ajax跨域问题（三种解决方案 - Web后台
ajax跨域问题（三种解决方案 按照上面的访问，由于127.0.0.1:8080和localhost:8081的域和端口不同，所以同样会出现跨域问题。 ajax跨域问题（三种解决方案 ajax跨域问题（三种解决方案
现在用添加响应头的方式
Demo2(jsonp的callback方式)
这里演示的是jquery的ajax，后台采用的是webservice接口形式
注意此时的dataType为jsonp格式，看看后台的接收
，
我们返回的其实就是一个函数的调用文本，这里注意，callback的名称，由于前台没有指定callback函数，所以这里自动生成了，如果想自定义回调函数名称如下操作，添加一行请求参数
这样后台的回调函数名就变成了mytest
浏览器发出的请求格式和响应数据如下，其实就是返回函数的调用，而需要返回的数据则以函数参数值的形式填入
此时控制台就能够获取到“hello world”
推荐参考资料：
http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html
</article>
<div class="article-bar-bottom" style="height: 54px; overflow: hidden;">
<div class="article-copyright">
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u014727260/article/details/72793459 </div>
<div class="tags-box artic-tag-box">
<span class="label">文章标签：</span>
<a data-track-click="{"mod":"popu_626","con":"ajax"}" class="tag-link" href="http://so.csdn.net/so/search/s.do?q=ajax&t=blog" target="_blank" rel="external nofollow" target="_blank">ajax </a><a data-track-click="{"mod":"popu_626","con":"javascript"}" class="tag-link" href="http://so.csdn.net/so/search/s.do?q=javascript&t=blog" target="_blank" rel="external nofollow" target="_blank">javascript </a><a data-track-click="{"mod":"popu_626","con":"jsonp"}" class="tag-link" href="http://so.csdn.net/so/search/s.do?q=jsonp&t=blog" target="_blank" rel="external nofollow" target="_blank">jsonp </a><a data-track-click="{"mod":"popu_626","con":"webservice"}" class="tag-link" href="http://so.csdn.net/so/search/s.do?q=webservice&t=blog" target="_blank" rel="external nofollow" target="_blank">webservice </a>
</div>
<div class="tags-box">
<span class="label">个人分类：</span>
<a class="tag-link" href="https://blog.csdn.net/u014727260/article/category/6529969" target="_blank" rel="external nofollow" target="_blank">javascript </a><a class="tag-link" href="https://blog.csdn.net/u014727260/article/category/6529979" target="_blank" rel="external nofollow" target="_blank">jquery </a><a class="tag-link" href="https://blog.csdn.net/u014727260/article/category/6529971" target="_blank" rel="external nofollow" target="_blank">HTML </a><a class="tag-link" href="https://blog.csdn.net/u014727260/article/category/6549773" target="_blank" rel="external nofollow" target="_blank">webservice </a>
</div>
<div class="tags-box hot-word">
<span class="label">相关热词：</span>
<a class="tag-link" href="https://blog.csdn.net/qq_28632173/article/details/50754699" target="_blank" rel="external nofollow" target="_blank">
ajax和 </a>
<a class="tag-link" href="https://blog.csdn.net/oTengYue/article/details/51598277" target="_blank" rel="external nofollow" target="_blank">
ajax与 </a>
<a class="tag-link" href="https://blog.csdn.net/fan510988896/article/details/71520390" target="_blank" rel="external nofollow" target="_blank">
下载图片ajax </a>
<a class="tag-link" href="https://blog.csdn.net/u014656173/article/details/67646372" target="_blank" rel="external nofollow" target="_blank">
中文乱码ajax </a>
<a class="tag-link" href="https://blog.csdn.net/j080624/article/details/73775835" target="_blank" rel="external nofollow" target="_blank">
判断ajax </a>
</div>
<div class="article_info_click" style="left: 326px; width: auto; top: 24px;">▼查看关于本篇文章更多信息</div></div>
<!-- !empty($pre_next_article[0]) -->
<div class="related-article related-article-prev text-truncate">
<a href="https://blog.csdn.net/u014727260/article/details/72676508" target="_blank" rel="external nofollow" >
<span>上一篇</span>办公自动化学习网站 </a>
</div>
<div class="related-article related-article-next text-truncate">
<a href="https://blog.csdn.net/u014727260/article/details/73441246" target="_blank" rel="external nofollow" >
<span>下一篇</span>正向代理和反向代理 </a>
</div>
</div>