搭建测试用的前后端交互的小demo（含有webpack、cors跨域处理）

1. 创建一个文件夹webpack，并创建如图目录结构

2. 安装插件

npm init

cnpm install webpack@4.20.2 --save-dev

cnpm install webpack-dev-server@3.1.9 --save-dev

cnpm install webpack-cli@3.1.2 --save-dev

cnpm install html-webpack-plugin@3.2.0 --save-dev

3.配置webpack.config.js

 // require: node 里面加载依赖包的方式
let path = require('path')
let htmlWebpackPlugin = require('html-webpack-plugin'); // 动态引入script的插件

module.exports = {
  entry: './src/main.js', // 入口 模块化
  output: { // 出口 打包的文件目录在哪里
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'), // __dirname 当前目录下创建dist文件
    publicPath: '/' // 资源路径
  },
  plugins: [
    new htmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html'
    })
  ]
}

4. 配置package.json

{
  "name": "mywebpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server" // 增加命令
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.9"
  }
}

5. npm run dev 运行前端代码，控制台可以打印出src下的index.js文件中的console语句，就代表成功了。

6. 创建server.js文件，作为后端服务

cnpm install express --save-dev

server.js

// 此处使用node的框架express
// express 的优点：比较容易增加路由跳转功能，不用写那么多if判断

// 1. 引入express
let express = require('express');
// 2. 此处相当于创建原生nodejs的方法 http.createServer
let app = express();
// 3. 路由跳转
app.get('/user', (req, res) => {
  res.json({ name: 'Jack' });
})
// 4. 监听
app.listen(3000, function() {
  console.log('服务启动，端口3000');
})

node server.js 跑一下后端服务

http://localhost:3000/user网址出现{ name: 'Jack' }，就代表成功了。

7. src/main.js 前端调用后端服务接口

// 通过import找到所有模块，然后依次打包
console.log('入口');
// ajax 请求
let xhr = new XMLHttpRequest();
xhr.open('get', 'http://localhost:3000/user', true);
xhr.onload = function() {
  console.log(xhr.response);
}
xhr.send();

8. 然后会报跨域

 

解决方案后端服务文件server.js配置cors

// 此处使用node的框架express
// express 的优点：比较容易增加路由跳转功能，不用写那么多if判断

// 1. 引入express
let express = require('express');
// 2. 此处相当于创建原生nodejs的方法 http.createServer
let app = express();

// 配置cors
let allowCrossDomain = function(req, res, next) {
  // 限制
  // 请求源  允许所有请求源 ajax http://localhost:8080/
  res.header('Access-Control-Allow-Origin', '*');
  // 请求头  允许所有请求头 携带请求限制  x-token
  res.header('Access-Control-Allow-Headers', '*');
  // 请求的方法  允许所有请求的方法 post get put delete
  res.header('Access-Control-Allow-Methods', '*');
  next(); // 下一步
}
app.use(allowCrossDomain);

// 3. 路由跳转
app.get('/user', (req, res) => {
  res.json({ name: 'Jack' });
})
// 4. 监听
app.listen(3000, function() {
  console.log('服务启动，端口3000');
})

配置完，重新跑一下node server.js即可，在前端拿到数据{"name":"Jack"} xhr.response。

9. 最后目录展示