前端mock数据，跨域处理

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

用的是 react+webpack框架前端

首前后端建立数据 node

npm i koa koa-router -Dreact

建立一个server服务webpack

server.jses6

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后端web

后端服务开启成功npm

因此如今后端提供了几个api，拿/api/1 和/api/2来测试json

这里咱们须要用到webpack-dev-server这个插件，它能够为后端提供一个代理服务redux

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(
	// <Hello />,
	<Provider store={store}>
		<Tdd />
	</Provider>,
	document.getElementById('root')
)

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