使用umi+node碰到的简单跨域问题

记UmiJS使用本地node服务器的跨域问题

umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架。有兴趣的同志们可以自行百度了解一下。

首先框架安照文档搭起来，该加的加上，ts也是个好东西，好的，也加上。

接口请求的方法用的是自己简单使用axios封装的方法，就是将get和post放同一个函数进行处理了

	const axios = require('axios');
	//封装axios请求，get和post
	export default function(url, method, params = {}) {
	let data = method.toLocaleLowerCase() === 'get' ? 'params' : 'data';
  		return axios({
    		method,
    		url,
    		[data]: params,
    		headers: {
      			'Content-Type': 'application/json'
    		}
  		}).then((res) => {
    		return Promise.resolve(res.data);
  		}).catch((err) => {
    		return Promise.reject(err);
  		})
	}

简单说一下，axios的get和post请求从上面可以看出get使用的是params，而post是data，所以就嘿嘿嘿了，最后用promise将结果抛出。

ok，首先就造一个login登录页好了，反正也就测测跨域。

很简陋，最开始我的node server是没有做如何处理的，正儿八经的简单版node服务器

const Koa = require('koa');
const Path = require('path');
const Static = require('koa-static');
const KoaBody = require('koa-body')();
const Route = require('./router/router');
const { chatMessage } = require('./mysql/chat_mysql');
const App = new Koa();
const main = Static(Path.join(__dirname));

App.use(main);
App.use(KoaBody);

App
.use(Route.routes())
.use(Route.allowedMethods());

server.listen(3666, (err) => {
  	if(err) {
    	throw err;
  	}
	console.log('server listen 3666');
});

还有node路由配置，里面的处理方法写在processData文件里了

	const Router = require('koa-router');

	const Route = new Router();

	const { wantOptionData } = require('../processData/processData');

	Route.post('/wantMsg', wantOptionData);

	module.exports = Route;

	
	/processData文件
	
	const { wantData } = require('../mysql/mysql');

	// ------------------ctx.query获取get请求参数--------------------------------------
	// ------------------ctx.request.body获取post请求参数------------------------------
	// let data = fs.readFileSync('./k_Mongo/shopList.json', 'utf-8');  读取文件信息
	// statements：操作语句
	// parameter：操作的数据

	const wantOptionData = async(ctx) => { // 处理请求
  		let res = ctx.request.body;
  		let requestType = res.requestType;
  		let statements = res.statements;
	 	let parameter = res.parameter ? JSON.parse(res.parameter) : null;
	  	ctx.response.type = 'json';
	  	await wantData(statements, parameter, requestType).then(data => {
	    	ctx.body = data;
	  	}, () => {
	    	ctx.body = { err: 'error' };
  		});
	};

	module.exports = {
	  wantOptionData
	};

不要脸的又强行加了这么多字，好了，进入正题

点击发一个请求，方法呢是这个

export default function wantOperationApi(params: any) {
    return fetch('http://localhost:3666/wantMsg', 'post', params);
}

然后可以看到这个样子

首先umi发送post请求前会先发出一个OPTIONS请求去获取服务器允许前台页面请求它的方法，可以看看服务器给它的信息

可以看到啥也没返回嘛，这是当然，因为你啥也没干啊，服务器不仅没给你返回，浏览器还给你一个错，说你跨域了，惊不惊喜。

那怎么解决呢，前端跨域的方法就不介绍了，这里用的CORS，也琢磨了好一会，后来才发现原来就这几句代码就ok了

App.use(async (ctx, next) => {
  	const hrefList = ctx.request.header.origin.split(':');
  	const prot = hrefList[hrefList.length - 1];
  	ctx.set('Access-Control-Allow-Origin', `http://localhost:${prot}`);
  	ctx.set('Access-Control-Allow-Headers', 'authorization,content-type');
  	ctx.set('Access-Control-Allow-Methods', 'GET,POST,OPTIONS,PUT,DELETE');
  	await next();
});

看着是不是觉得很简单，就是这么简单。这边只允许localhost发过来的请求，端口号不限制。最后看看效果：

OPTIONS请求

POST请求

好了，到此扯皮结束。