ajax跨域问题（三种解决方案

		</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标签（可以直接跨域发送数据并接收数据）等
  

---

如何解决跨域问题

• 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

    	</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="{&quot;mod&quot;:&quot;popu_626&quot;,&quot;con&quot;:&quot;ajax&quot;}" class="tag-link" href="http://so.csdn.net/so/search/s.do?q=ajax&amp;t=blog" target="_blank">ajax						</a><a data-track-click="{&quot;mod&quot;:&quot;popu_626&quot;,&quot;con&quot;:&quot;javascript&quot;}" class="tag-link" href="http://so.csdn.net/so/search/s.do?q=javascript&amp;t=blog" target="_blank">javascript						</a><a data-track-click="{&quot;mod&quot;:&quot;popu_626&quot;,&quot;con&quot;:&quot;jsonp&quot;}" class="tag-link" href="http://so.csdn.net/so/search/s.do?q=jsonp&amp;t=blog" target="_blank">jsonp						</a><a data-track-click="{&quot;mod&quot;:&quot;popu_626&quot;,&quot;con&quot;:&quot;webservice&quot;}" class="tag-link" href="http://so.csdn.net/so/search/s.do?q=webservice&amp;t=blog" 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">javascript						</a><a class="tag-link" href="https://blog.csdn.net/u014727260/article/category/6529979" target="_blank">jquery						</a><a class="tag-link" href="https://blog.csdn.net/u014727260/article/category/6529971" target="_blank">HTML						</a><a class="tag-link" href="https://blog.csdn.net/u014727260/article/category/6549773" 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">
		ajax和			</a>
					<a class="tag-link" href="https://blog.csdn.net/oTengYue/article/details/51598277" target="_blank">
		ajax与			</a>
					<a class="tag-link" href="https://blog.csdn.net/fan510988896/article/details/71520390" target="_blank">
		下载图片ajax			</a>
					<a class="tag-link" href="https://blog.csdn.net/u014656173/article/details/67646372" target="_blank">
		中文乱码ajax			</a>
					<a class="tag-link" href="https://blog.csdn.net/j080624/article/details/73775835" 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">
			<span>上一篇</span>办公自动化学习网站			</a>
	</div>
							<div class="related-article related-article-next text-truncate">
		<a href="https://blog.csdn.net/u014727260/article/details/73441246">
			<span>下一篇</span>正向代理和反向代理			</a>
	</div>
	</div>