前端mock数据，跨域处理

前端模拟数据，我时自己引入一个后端koa插件，自己让后端设置数据，发送一个api给前端

用的是 react+webpack框架

首先后端创建数据 

npm i koa koa-router -D

创建一个server服务

server.js

var app = require('koa')();
var router = require('koa-router')();

router.get('/', function *(next) {
	this.body = 'hello koa!'
});

router.get('/api', function *(next) {
	this.body = 'test data'
});

router.get('/api/1', function *(next) {
	this.body = 'test data 1'
});

router.get('/api/2', function *(next) {
	this.body = {
		a: 1,
		b: '123'
	}
});


app.use(router.routes())
	.use(router.allowedMethods());

app.listen(3000);

然后用node 路径/server.js 开始koa后端

后端服务开启成功

所以现在后端提供了几个api，拿/api/1 和/api/2来测试

这里我们需要用到webpack-dev-server这个插件，它可以为后端提供一个代理服务

npm i webpack webpack-dev-server -D

创建webpack.config.js配置文件

module.exports = {
    
    devServer: {
        proxy: {
          '/api': {
            target: 'http://localhost:3000',
            secure: false
          }
        }
    }
}

这样可以让前端如果访问到 /api这个路径时，能直接转到

http://localhost:3000

这个服务器

现在可以来让前端接收数据了

首先我们需要安装两个插件 npm i fetch es6-promise -S

接着我们创建一个get方法

get.js

import 'whatwg-fetch'
import 'es6-promise'

export function get(url) {
	var result = fetch(url, {
		credentials: 'include',
		headers: {
			'Accept': 'application/json, text/plain, */*'
		}
	});

	return result;
}

接着在data.js中将数据进行获取

import { get } from './get.js'

export function getData() {
	var result1 = get('/api/1')

	result1.then(res => {
		return res.text()
	}).then(text => {
		console.log(text)
	})

	var result2 = get('/api/2')

	result2.then(res => {
		return res.json()
	}).then(json => {
		console.log(json)
	})
}

然后再调用index.js中调用这个getData（）就行了

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import configureStore from './store/configureStore'


// import Hello from './containers/Hello';

import Tdd from './containers/Tdd'

const store = configureStore()

// 测试fetch的功能

import { getData } from './fetch/data.js'
getData();

render(
	// ,
	
		
	,
	document.getElementById('root')
)

看端口号 8080 调用，证明成功