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

        <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”

        </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>

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

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

如何解决跨域问题

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

Demo2(jsonp的callback方式)

猜你喜欢