作为跨域访问,很多人都知道,由于同源策略(所谓同源,即域名、协议、端口相同),造成js不能操作非同源的web页面的内容,随着前端的不断发展,使用的不断深入,这也产生了很多的不便。下面,我将通过两种方式进行跨域访问:

1、通过chrome扩展程序:

对于使用chrome浏览器的用户,可以通过此方式方便的进行跨域访问,而且不需要进行后台数据的操作,只需在前端就能进行跨域访问且取得里面你想要的内容,例如当想要取得http://files.qidian.com/Author6/2877557/46513147.txt里面内容的时候,就可以使用此方法方便取得。

在这之前,首先得对chrome扩展程序进行简单的配置,从而产生一个属于自己的chrome扩展程序。下面一个简洁步骤:

首先,在桌面,也可以在你任何磁盘里新建一个文件夹,而我则建了个名chrome文件夹,里面最重要的是包含一个manifest.json的文件,详细信息可参阅http://docs.lmk123.com/getstarted.html;

manifest.json文件内容如下:

其中最重要的是permissions中“http://*/*”,其代表能够运行的网址范围,还有就是content_scripts中的js,其表示需要使用的js文件。

在myOwn.js中代码为:$.get("http://files.qidian.com/Author6/2877557/46513147.txt",function(res){

console.log(res);

});

最后就是将你自己写的扩展程序安装至chrome,方法是:打开chrome——>右上角“自定义及控制”——>工具——>扩展程序;进入后,点击“加载正在开发的扩展程序”,选择你上面创建的文件夹,我的就是chrome,后得到:

只要启动就说明成功了;但是由于在每个http网站都会执行此myOwn.js;所以测试完后可以删除就行;

现在只要你随便进入一个http://*/*网站,它就会执行,并得到你想要的结果

但由于请求的文件的编码问题,会出现乱码,只需要使用我上个博客中提供的函数进行请求处理,就可以成功得到天朝文;注意就是在使用这个扩展程序的时候,当你每次修改你的js文件后,需要在刚刚加载扩展程序页面进行刷新才能更新;即按F5或ctrl+R;

2、使用jsonp进行跨域访问;

最简单理解jsonp理解,就是说通过script元素作为ajax传输机制,只需要设置其src地址,就可以不受同源策略的影响,就可以进行跨域访问:

我进行测试,是先在我自己的apache服务器上建了一个ajax.txt文件,内容是:

document.write("测试ajax跨域中文代码");

而在webstorm 7上创建一个csjsonp.html文件;里面代码为:

结果,在网页中打印:

说明进行了跨域访问,因为我的csjsonp.html地址为:http://localhost:63342/across_domain/csjsonp.html;两个端口号不同;若通过ajax请求;即将csjsonp代码改为:

$.get("http://localhost/phpstorm/ajax.txt",function(res){

alert(res);

})

后刷新,则不会打印结果,且报错:

这就是最简单的jsonp跨域;但是有时候在使用,需要的不是一开始就将其写入script标签中,而是动态得到,此时就需要动态添加script标签进行请求,但是,这种需要前后台均进行修改,我们先将csjsonp.html修改为:

var oScript = document.createElement("script");

oScript.src="http://localhost/phpstorm/ajax.txt";

document.body.appendChild(oScript);

function jsonpback(res){

alert(res);

}

如果你不改请求文件中内容,刷新后将不会有任何反应,但是,如果我们将ajax.txt文件内容改为:

jsonpback("测试ajax跨域中文代码");

结果呢,刷新就将打印出结果:

,也就是说,需要在前后台添加一个回调函数jsonpback;

使用jquery进行jsonp为:

$.ajax({

url:"http://localhost/phpstorm/ajax.txt",

dataType:"jsonp",

jsonpCallback:"jsonpback",

success:function(res){

alert(res);

}

})

对于跨域访问,还有很多方式和不同的情况,可根据情况进行选择。

chrome 插件 页面请求转发_使用chrome扩展程序及jsonp实现跨域访问相关推荐

  1. chrome 插件 页面请求转发_入门chrome插件开发教程和经验总结,一篇就搞掂!

    前言 关于chrome extension的开发经验总结或说明文档等资料很多,很多人在写,然而,我也是一员.但是,也许这篇文章,可能给你一些不一样的感受. 这里介绍的是80%你要开发扩展会碰到的问题 ...

  2. chrome 插件 页面请求转发_巧用Chrome插件二三事

    作为程序员,在日常工作中往往会遇到一些影响工作效率的事情,比如:配套工具不趁手,开发环境难以搭建,代码调试困难等.这些问题由于并不直接与产品相关,所以往往受到忽视,但它们却又无时无刻不在,确确实实地影 ...

  3. 【03】Chrome提示印象笔记剪藏插件已停用不支持的扩展程序怎么办?

    [03] Chrome提示印象笔记剪藏插件"已停用不支持的扩展程序"怎么办? 刚好也遇上了这个问题,百度了一下,以下是解决方法,亲测可行: 1.首先把需要安装的第三方插件,后缀.c ...

  4. 前端页面请求转发(forward)与重定向(redirect)

    页面跳转有两种实现方式:请求转发和页面重定向. 请求转发(forward) 请求转发可以理解成是服务器端的行为.客户端发起一次请求,这个请求在整个服务端可以被多次传递,但都是由服务器端的处理程序传递给 ...

  5. Chrome浏览器设置跨域访问【新旧版本两种方式设置】

    一般我们在进行前后分离的项目 webapp 开发,或者 H5 移动 App 开发时,我们会使用 PC 端浏览器进行开发调试.但默认情况下 Ajax 请求无法跨域访问,请求时会报如下错误: XMLHtt ...

  6. yii2 跨域请求配置_如何在SpringBoot应用中实现跨域访问资源和消息通信?

    允许跨域访问 CORS ( Cross Origin Resource Sharing,跨域资源共享)机制允许Web应用服务器进行跨域访问控制,从而使跨域数据传输得以安全进行.浏览器支持在API容器中 ...

  7. 解决Chrome无法从该网站添加应用、扩展程序或脚本

    转自:解决Chrome无法从该网站添加应用.扩展程序或脚本_七书的博客-CSDN博客_chrome无法添加扩展程序 1.先将后缀名为.crx的扩展文件的后缀名改为.rar. 2.然后将这个压缩文件解压 ...

  8. 如何解决Chrome “无法从该网站添加应用,扩展程序和用户脚本”提示?

    如何解决Chrome "无法从该网站添加应用,扩展程序和用户脚本"提示? Chrome最新版已经禁止安装本地插件,也就是说,禁止离线安装扩展crx. 如图: 使用破解工具--Chr ...

  9. authorization 传 就跨域_跨域访问接口上传图片出现options请求问题解决方法

    1.首先因为服务器端会先发送一个option请求到后台  在后台返回一个post给页面 页面在处理post请求给接口 2.先写一个过滤器, 我们自己定义一个过滤器 package com.adtime ...

  10. Chrome 配置允许跨域访问

    跨域是浏览器为了更加安全,使用同源策略控制网站不能执行其他网站的脚本. 解决跨域问题一般可以通过几个方式改变: 在服务端配置允许跨域(CORS): jsonp 访问方式: 开发.安装浏览器扩展: 取消 ...

最新文章

  1. android viewflipper图片轮播,使用ViewFlipper实现图片轮播
  2. 反思代码优化点:充分使用错误处理机制
  3. 30岁之前需要知道的10个人生底线,你知道几个?
  4. linux-磁盘情况查询-待小结
  5. basler相机的触发线是那两脚_车牌相机是怎么和LED屏联动的?
  6. linux 用户管理和帮助命令
  7. 用例子看Swift4的GCD
  8. python中%的用法_python中%的用法
  9. 区块链入门教程(1)--概述
  10. 【大连理工大学】计算机专业选修:深度学习2020期末复习
  11. HTTP协议-python接口自动化话测试(无涯)
  12. 第三方框架Masonry的基本使用
  13. Bootstrap的基本使用方法,5分钟帮你搞懂怎么用
  14. [js]javascript实现多个json对象及列表的美化,容错非法json
  15. 前端如何防止多次接口请求
  16. FPGA----ZCU106与RTDs的udp数据收发实验
  17. Adobe Audition CS6
  18. python 在南京发展_解读城市规划:南京2035 - 创新名城,美丽古都(中)
  19. 【一步一步学习VBA】WORD 创建表格并合并表格
  20. 从零开始学习微服务 -微服务基本概述、微服务案例

热门文章

  1. Spring Cloud在国内中小型公司能用起来吗?
  2. Android编程权威指南第三版 第31章
  3. 编写测试用例方法之错误推测法
  4. 【图片新闻】俄罗斯水下核武器“海啸天启鱼雷”探秘
  5. 好奇怪呀后面加什么标点_说后面加什么标点符号
  6. 攻防世界-web-mfw
  7. Android Parcel对象详解
  8. 【OHOS】常用命令整理
  9. MATLAB求解一阶RC电路和二阶RLC电路
  10. 为什么我的背景图片加载不出来