专栏首页学习猿地Web前端学习 第6章 jQuery Ajax 4 跨域请求
原创

Web前端学习 第6章 jQuery Ajax 4 跨域请求

一、同源策略

同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。所以xyz.com下的js脚本采用ajax读取abc.com里面的文件数据是会被拒绝的。

相同ip(域名),同端口,则为同源,否则为不同源

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制

二、jsonp原理

Ajax在默认的情况下是不可以跨域的,但是script标签可以通过src属性获取到跨域的js文件。

因此我们可以想到一个办法,那就是把数据装载到js文件中,然后通过script标签跨域引入到当前项目中,进而使用跨域的数据。

这里需要注意的是,jsonp本质上并不是Ajax,但是功能很像,所以经常会把jsonp方法和Ajax放在一起讨论

我们现在模拟一个jsonp的示例:

  1. 在本地开启两个服务器,端口分别为8080和3000。
  2. 把待获取的数据放在3000端口服务器的一个js文件中。
  3. 3000端口服务器的前端页面引入8080端口服务器的js文件。
  4. 然后使用3000端口服务器的数据。

使用jQuery跨域请求数据

 1 //核心代码如下所示
 2 const jsonp = require('koa-jsonp')
 3 app.use(jsonp())
 4 router.get("/data", ctx => {
 5     ctx.body = "hello jsonp"
 6 })
 7 
 8 $.ajax({
 9     url:"http://127.0.0.1:3000/data",
10     dataType:"jsonp"
11 }).done( res => {
12     console.log(res);
13 })

三、设置响应头

很多时候我们在制作一个前后端分离的项目时,开发过程是需要跨域的,但是项目部署后并不需要跨域,这个时候,我们可以直接设置服务器允许跨域。

通过设置http协议的响应头部属性Access-Control-Allow-Origin可以允许其他服务器对本服务进行跨域请求,示例代码如下所示:

1 router.get("/getdata", async (ctx) => {
2     ctx.set('Access-Control-Allow-Origin', 'http://127.0.0.1:8080'); 
3     ctx.body = "data"
4 });

设置之后,/getdata这个接口就会允许跨域请求了。

四、课后练习

默认数据如下所示,

["香蕉","苹果","鸭梨"]

使用http-server创建一个服务器,端口为8080;

使用Koa创建一个服务器,端口为3000;

在8080端口的服务器使用axios的跨域请求实现后台数据列表的增删改查,要求如下:

  1. get方法获取数据列表
  2. post添加数据,然后重新查询
  3. put修改数据,然后重新查询
  4. delete删除数据,然后重新查询

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【融职培训】Web前端学习 第6章 jQuery Ajax 4 跨域请求

    同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。所以xyz.com下的js脚本采用ajax读取abc.com里面的文...

    学习猿地
  • Web前端学习 第7章 Vue基础教程3 模板语法

    指令 (Directives) 是带有 v- 前缀的特殊属性,在此之前我们学习过的指令如下所示:

    学习猿地
  • Web前端学习 第4章 jQuery 5 bootstrap概述

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。使用Bootstrap,可以使我们的开发更快捷方便

    学习猿地
  • 【融职培训】Web前端学习 第6章 jQuery Ajax 4 跨域请求

    同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。所以xyz.com下的js脚本采用ajax读取abc.com里面的文...

    学习猿地
  • 一种新的 HeaderView + RecyclerView 实现方式

    在 GitHub 开源了一种新的 Header View + RecyclerView 实现方式,使用 CoordinatorLayout 把 header 抽...

    非著名程序员
  • 【算法实战系列】两数之和

    最近ofo的消息很是火爆,前段时间,很多人去ofo的总部要求退押金,场面很是震撼,因此有网友戏称为北京车友会。个人觉得,说实话,为了这部分押金真的跑去北京讨还押...

    良月柒
  • nc,远程传输文件

    使用nc命令可以很快的在两台主机传递文件,且不需要在同一网段,只要设置好端口即可.

    windseek
  • 老司机谈DevOps 2.0:引子

    译者的话: 你真的懂DevOps么?你知道怎么就持续集成持续部署又微服务了么,用时下流行的工具,实践DevOps怎么搞……跟着我,听老司机818 DevOps的...

    yuanyi928
  • 云到云数据备份:如何选择供应商

    从费用到产品功能,在为企业选择正确的云到云备份技术,以及供应商时,有很多需要评估的方面。 将IT资源迁移到云上的副作用之一是备份通常会变得更加困难。这在软件即服...

    静一
  • 项目端口可以设置为 6666 吗?

    读万卷书,行万里路!有的技能可以从书里学会,有的技能却需要在实战中打怪升级慢慢掌握,今天就来和大家聊一个很多小伙伴经常遇到的问题。

    江南一点雨

扫码关注云+社区

领取腾讯云代金券