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

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


转载于:https://www.cnblogs.com/zhangym118/p/5999294.html

5种处理js跨域问题方法汇总(转载)相关推荐

  1. Js跨域解决方法总结

    本文转载自网易博客 出于安全性的考虑,在AJAX应用中,浏览器通常都会限制跨域提交数据.但由于经常和其他部门有接口对接的业务需求,需要跨域获取数据. IE对于跨域访问的处理是,弹出警告框,提醒用户.如 ...

  2. 几种常见的跨域解决方法

    前言 由于浏览器的同源策略,当我们请求网络资源时,所在页面的url中的协议,端口,域名其中一个与请求资源的url不同,都会出现跨域的问题.但是浏览器不能没有这个策略,这样会很危险,像csrf,xss攻 ...

  3. pdf.js跨域解决方法——远程加载pdf

    思路:通过将需要浏览的pdf通过后台转为文件流传给前端,来解决跨域问题. js代码写在viewer.html里,放到引用pdf.js的位置前面 js代码,来接收文件流: <script>v ...

  4. Iframe和Frame中实现cookie跨域的方法(转载)

    在Iframe和Frame中默认是不支持Cookie跨域的,但通过设置P3P协议相关的响应头可以解决这一问题. 关于p3p协议: P3P: Platform for Privacy Preferenc ...

  5. 常见js跨域解决方案

    以下为几种常见js跨域解决方案: ajax跨域请求 一.使用jsonp方式实现跨域请求 $.ajax({async: false, type:"POST",dataType: 'j ...

  6. js中几种实用的跨域方法原理详解

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  7. window.opener方法的使用 js跨域

    2019独角兽企业重金招聘Python工程师标准>>> 最近公司网站登陆加入了第三方登陆.可以用QQ直接登陆到我们网站,在login页面A中点QQ登陆时,调用了一个window.op ...

  8. 【转】JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  9. JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

最新文章

  1. kernel logo到开机动画之间闪现黑屏(android 5.X)
  2. arduino水温度传感器数字显示_【雕爷学编程】Arduino动手做(5)---热敏温度传感器模块...
  3. SQLite 数据库注入总结
  4. java publickey_数字证书中读取PublicKey
  5. MFC中的动态创建与运行时识别
  6. c中的结构体嵌套问题_C中的结构
  7. CHAPTER 28 VMX SUPPORT FOR ADDRESS TRANSLATION
  8. 跟人合作人工智能,方案没有,钱又不出,这怎么合作?
  9. data fastboot 擦除_fastboot是什么?如何解锁fastboot?
  10. Android 直播调研
  11. Git Git用户ssh公钥管理
  12. 荣耀8c鸿蒙,【荣耀畅玩8C评测】千元标配4GB大内存 荣耀8C给你越级体验-中关村在线...
  13. anaconda 创建虚拟环境(自己版本)
  14. 将来的手机,我心中的手机 【十年前的一篇随笔】
  15. 二进制安装K8S - NODE 节点的安装
  16. Ant Design蚂蚁设计理念
  17. 【Android Gradle 插件】AaptOptions 配置 ⑥ ( Overlay 重叠包机制 | AaptOptions#additionalParameters 附加参数配置 )
  18. 计算机挂载磁盘阵列,电脑中进行磁盘阵列RAID配置的详细步骤
  19. 论企业大数据的落地路径
  20. 北京邮电大学计算机学院李立,郑霄龙(博导)

热门文章

  1. Kotlin极简教程:第10章 Kotlin与Java互操作
  2. Android应用开发:页面跳转和数据传递
  3. 明明输出电压小于5V,单片机ADC测量到数值却一直为5V,解决方法
  4. 涨工资一般涨百分之多少_上证50etf期权涨一个点能赚多少钱?
  5. ubuntu镜像添加jdk_Ubuntu16.0.4安装jdk8
  6. jmh气象传真图网站_在冬奥滑雪场,他凭着气象信息,念好一本生意经
  7. 启动转换安装失败 拷贝windows安装文件时出错_系统小技巧:“徒手”创建可启动的VHD系统...
  8. 360导入html没有,IE无法加载到外部CSS样式, 用360浏览器就可以,上CSS引用代码[急]_html/css_WEB-ITnose...
  9. 计算机缺乏内存将无法运行,电脑增加内存为什么无法启动
  10. 软考高项之进度管理——攻坚记忆