egg中的一些基本使用注意事项以及如何跨域（CORS）、JSONP、Proxy

目录

路由Router

控制器Controller

public

跨域CROS

JSONP

事件代理Proxy

---

路由Router

路由是描述请求URL和具体承担执行动作的Controller的对应。说的直白点，就是用户访问不同的路径时应该有不同的Controller去响应不同的内容。

可以调用分别调用post、get请求（参数1为请求的URL，参数2为回调函数（这里只是传参））

'use strict';

/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
  const { router, controller } = app;
  // router.get("/*",controller.home.all)
  router.get('/', controller.home.index);
  router.get('/ajax1', controller.home.ajax1);
  router.get('/public/index.html', controller.home.XX);//该URL如果在静态资源中存在，则会直接访问静态资源的数据

};

注意：1、注册路由时 路由名（URL）不要跟静态文件名冲突  不然会优先访问静态资源

           2、如果注册的路由是 /*，这表示所有的该端口的网址都访问的是该路由的路径数据。但是遵循注册先后顺序，在注册它之前有别的路由则依然是访问之前注册的路径数据

控制器Controller

Controller负责解析用户的输入，处理后返回响应的结果。

1.所有的Controller 文件都必须放在 app/controller目录下

2.支持多级目录，访问时可以通过目录名级联访问。

用上面Router的代码举例：

那么Controller下面的home.js文件中会有以下代码（home.js是自带的，也可以根据自己的业务单独创建与home.js同级的js文件，按照home.js中的代码规范去写）

'use strict';

const Controller = require('egg').Controller;

class HomeController extends Controller {
  async index() {
    const { ctx } = this;
    ctx.body = 'hi, egg'; //这是egg自带的
  }
  async ajax1(){
	  this.ctx.body=["hello","666"]  //以下全是自己根据业务写返回的数据
  }
  
  async myjpg(){
	   this.ctx.body="hi  小狮子"
  };
  

}

module.exports = HomeController;

public

一般存放前端的数据如：html、img等（静态资源）

跨域CROS

在html中做axious请求（使用上边的代码）

		<h1>ajax</h1>
		<button onclick="fn()">请求</button>
		<script>
			function fn(){
				axios("http://localhost:7001/ajax1") 
				.then(res=>console.log(res.data))
				
			}
		</script>

在控制台得到的结果是：

 但是如果在axious中请求的不是同一服务器的网址就会产生跨域现象会报错

为解决此办法（CORS）：

1、需要下载插件 ：cnpm i --save egg-cors

2.开启插件（config/plugin.js文件中开启）

module.exports = {

   cors:{
      enable: true,
      package: 'egg-cors',
    }
};

3.配置插件   （config/config.default.js文件中配置）
 

module.exports = appInfo => {

	config.cors = {
		//origin: '*',表示允许所有的服务器网址都可以访问
		origin:function(ctx) { //设置允许来自指定域名请求
		         console.log(ctx);
		         const whiteList = ['服务器网址1','服务器网址2']; 
		         let url = ctx.request.header.origin;
		         if(whiteList.includes(url)){
		             return url;
		         }
		         return 'http://localhost' //默认允许本地请求可跨域
		     },
		allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH'
	}

};

这样就可以成功跨域去请求数据。

 注意:跨域前端请求时需要携带跨域凭证，否则依然获取不了。

JSONP

如果前端的参数中有cb（cb为固定写法）=fn参数(jsonp接口参数),将会返回JSONP格式的数据,

1.配置：（config/config.default.js文件中配置）

config.jsonp = {
  callback: 'cb', // 识别 query 中的 `cb` 参数
  limit: 100, // 函数名最长为 100 个字符
};

2.写接口（app/router.js文件中注册路由）
 

module.exports = app => {
  const jsonp = app.jsonp();
  app.router.get('/api/posts', jsonp, app.controller.posts.list);
};

第二种方法是直接在路由中写配置，不用分开写

module.exports = app => {
  const jsonp = app.jsonp({
  callback: 'cb',
  limit: 100,
});
  app.router.get('/api/posts', jsonp, app.controller.posts.list);
};

事件代理Proxy

不跨域，访问的自己的服务器里的网址来间接访问其他服务器的网址

1、写接口

	router.get('/sina', controller.home.sina);

2、接口访问的代理地址（在Controller下的home文件中配置）

  async sina(){
		var url="申请token码网址"
		let res=await this.ctx.curl(url)
		// console.log(res.data,1111111111)
		this.ctx.body=res.data.toString()
  }