【技术分享】WEB前端全栈成长计划(二阶段)-AJAX第三章Node.js跨域请求实践

举报
Zhoubo 发表于 2020/08/03 17:01:42 2020/08/03
【摘要】 本篇主要介绍,如何通过Node.js+JSONP实现两个站点的跨域访问

       根据课程进度,学习到跨域请求这个章节,感觉后期掌握跨域的使用很重要,为了巩固学习效果,所以在跟着视频做了几次实践老是出现莫名奇妙的错误,可能老师的操作系统环境是MacOS,感觉WIN10在操作上有些不同,总是不能请求成功。

特意花了一天时间理解从Node.js部署项目开始到跨域请求的课程重点,在WIN10环境一步步的对照视频,通过自己的办法排除了因操作系统不同的坑,完成了视频中跨域请求实践。

一、实践条件

1、 WIN10 x64操作系统

2、 完成了Node.js

3、 掌握使用Koa2框架初化项目

以上条件是必须的,不能理解的,还请多刷几遍视频。

为了保证实践的成功率,献上Gitee项目地址:https://gitee.com/net_master/Ajax_Node

 

二、实践操作步骤

## ajax项目初始化

> web端口3000  

> 打开node.js命令终端

```
cd d:\gitee
koa2 ajax
cd ajax && cnpm install
// 将gitee拉取跨域调用实践中ajax目录中代码覆盖到ajax根目录中
// 或按以下代码文件来修改
npm start
```


代码文件内容如下:

-    ajax/bin/www

```
var port = normalizePort(process.env.PORT || '3000');
```
-    ajax/app.js
```
// //跨域代码
 app.use(async function (ctx,next){
  if(ctx.path == "/ajax"){
    ctx.body = "f('hello ajax站点!')"  //站点2中定义了f()这个函数配合<script>完成跨域调用,我们在这里也要调用f()函数
  }
})
 
module.exports = app
 
```


 

## ajax2项目初始化

> web端口3002  

> 打开node.js命令终端

```
cd d:\gitee
koa2 ajax2
cd ajax2 && cnpm install
// 将gitee拉取跨域调用实践中ajax2目录中代码覆盖到ajax根目录中
// 或按以下代码文件来修改
npm start
```


代码文件内容如下:

-    ajax2/views/index.pug

```
block content
    <h1>我是站点ajax2</h1>
```


 

-    ajax2/views/layout.pug

```
    block content
    script(src='/javascripts/ajax.js')
    script.
      function f (data){
        console.log(data)
      }
    <script src="http://localhost:3000/ajax"></script>
 
```


 

本次实践重点:

1、 ajax站点中app.js中的代码是调用ajax2站点f()函数返回跨域请求数据,视频中穿插了一些AJAX的请求实例,但在跨域实践中使用的JSONP中并没有用到AJAX,是利用了<script>天然可以跨域的特性来完成跨域请求

2、 ajax2layoutp.pug中定义f()只是一个响应方法,重点在于<script src="……">这句

 

## 测试跨域调用

> 浏览器访问 http://localhot:3002  

> ajax2站点跨域调用ajax站点数据

> 

查看控制台输出以下内空,则表示成功

 

```
hello ajax站点!  //此内容在ajax站点app.js中定义
```


 


zhoubo

2020.8.3 at Great 108


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。