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

       根据课程进度，学习到跨域请求这个章节，感觉后期掌握跨域的使用很重要，为了巩固学习效果，所以在跟着视频做了几次实践老是出现莫名奇妙的错误，可能老师的操作系统环境是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、 ajax2中layoutp.pug中定义f()只是一个响应方法，重点在于<script src="……">这句

## 测试跨域调用

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

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

> 

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

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

zhoubo

2020.8.3 at Great 108