zoukankan      html  css  js  c++  java
  • 5种处理js跨域问题方法汇总(转载)

    1.JSONP跨域GET请求

       ajax请求,dataType为jsonp。这种形式需要请求在服务端调整为返回callback([json-object])的形式。如果服务端返回的是普通json对象。那么调试的时候,在chrome浏览器的控制台会报"Uncaught SyntaxError: Unexpected token"错误;在firefox浏览器的控制台会报"SyntaxError: missing ; before statement"错误。

    JSON是一种轻量级的数据交换格式,像xml一样,是用来描述数据间的。

    JSONP是一种使用JSON数据的方式,返回的不是JSON对象,是包含JSON对象的javaScript脚本。

    由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。若要跨域请求出于安全性考虑是不行的,但是我们发现,Web页面上调用js文件时则不受是否跨域的影响,而且拥有”src”这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>,这时候,聪明的程序猿就想到了变通的方法,如果要进行跨域请求, 通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递 javascript对象。即在跨域的服务端生成JSON数据,然后包装成script脚本回传,着不就突破同源策略的限制,解决了跨域访问的问题了么。

    2.iframe跨域。

       页面中增加一个iframe元素,在需要调用get请求的时候,将iframe的src设置为get请求的url即可发起get请求的调用。

    var url = "http://xxx.xxx.xxx?p1=1&p2=2";
    $("#iframe").attr("src", url);//跨域,使用iframe

    iframe方式强于jsonp,除了可以处理http请求,还能够跨域实现js调用。

    3.script元素的src属性处理

       iframe、img、style、script等元素的src属性可以直接向不同域请求资源,jsonp正是利用script标签跨域请求资源的简单实现,所以这个和jsonp本质一样,同样需要服务端请求返回callback...形式。

    var url="http://xxx.xxx.xxx?p1=1";
    var script = document.createElement('script');
    script.setAttribute('src', url);
    document.getElementsByTagName('head')[0].appendChild(script);

    4.在服务器使用get处理。

       对于业务上没有硬性要求在前端处理的,可以在服务端做一次封装,再服务端发起调用,这样就可以解决跨域的问题。然后再根据请求是发出就完,还是需要获取返回值,来决定代码使用同步或者异步模式。

     private static void CreateGetHttpResponse(string url, int? timeout, string userAgent, CookieCollection cookies)
            {
                if (string.IsNullOrEmpty(url))
                {
                    throw new ArgumentNullException("url");
                }
                var request = WebRequest.Create(url) as HttpWebRequest;
                request.Method = "GET";
                if (!string.IsNullOrEmpty(userAgent))
                {
                    request.UserAgent = userAgent;
                }
                if (timeout.HasValue)
                {
                    request.Timeout = timeout.Value;
                }
                if (cookies != null)
                {
                    request.CookieContainer = new CookieContainer();
                    request.CookieContainer.Add(cookies);
                }
                request.BeginGetResponse(null,null);//异步
                //return request.GetResponse() as HttpWebResponse;
            }

    5.flash跨域

    过于尖端了==,再研究

    总结:以上5种方法就是常见的解决js跨域问题的处理方法了,最后一种比较高端,等我研究清楚了再补上吧。

    <script>

    <img>

    <iframe src>


    你的关注和支持是对我最大的动力~

    书山有路群[一个非常活跃的读书分享群,每周都有新书分享]:452450927

    微博:http://weibo.com/u/2241641312

    出处:http://www.cnblogs.com/wdlhao/

    github:https://github.com/wdlhao

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明。


  • 相关阅读:
    【荐2】Total Commander 7.57 配置选项 个性化设置备份,,,开启时如何自动最大化???(二)
    【荐1】Total Commander 7.57 个人使用设置 及 常用快捷键 备忘
    Total Commander 集成、调用 Beyond Compare比较文件
    Linux/CentOS下开启MySQL远程连接,远程管理数据库
    如何查看、修改Linux的系统时间
    Linux cp (复制)命令简介
    Linux网络下载命令 wget 简介
    Linux如何下解压windows下的.zip和.rar文件
    Linux tar (打包.压缩.解压缩)命令说明 | tar如何解压文件到指定的目录?
    解决宿主机不能访问虚拟机CentOS中的站点 | 更新CentOS防火墙设置开启80端口访问
  • 原文地址:https://www.cnblogs.com/zhangym118/p/5999294.html
Copyright © 2011-2022 走看看