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


    目录

    路由Router

    控制器Controller

    public

    跨域CROS

    JSONP

    事件代理Proxy


    路由Router

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

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

    1. 'use strict';
    2. /**
    3. * @param {Egg.Application} app - egg application
    4. */
    5. module.exports = app => {
    6. const { router, controller } = app;
    7. // router.get("/*",controller.home.all)
    8. router.get('/', controller.home.index);
    9. router.get('/ajax1', controller.home.ajax1);
    10. router.get('/public/index.html', controller.home.XX);//该URL如果在静态资源中存在,则会直接访问静态资源的数据
    11. };

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

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

    控制器Controller

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

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

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

    用上面Router的代码举例:

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

    1. 'use strict';
    2. const Controller = require('egg').Controller;
    3. class HomeController extends Controller {
    4. async index() {
    5. const { ctx } = this;
    6. ctx.body = 'hi, egg'; //这是egg自带的
    7. }
    8. async ajax1(){
    9. this.ctx.body=["hello","666"] //以下全是自己根据业务写返回的数据
    10. }
    11. async myjpg(){
    12. this.ctx.body="hi 小狮子"
    13. };
    14. }
    15. module.exports = HomeController;

    public

    一般存放前端的数据如:html、img等(静态资源)

    跨域CROS

    在html中做axious请求(使用上边的代码)

    1. <h1>ajaxh1>
    2. <button onclick="fn()">请求button>
    3. <script>
    4. function fn(){
    5. axios("http://localhost:7001/ajax1")
    6. .then(res=>console.log(res.data))
    7. }
    8. script>

    在控制台得到的结果是:

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

    为解决此办法(CORS):

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

    2.开启插件(config/plugin.js文件中开启)

    1. module.exports = {
    2. cors:{
    3. enable: true,
    4. package: 'egg-cors',
    5. }
    6. };


    3.配置插件   (config/config.default.js文件中配置)
     

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

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

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

    JSONP

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

    1.配置:(config/config.default.js文件中配置)

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

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

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

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

    1. module.exports = app => {
    2. const jsonp = app.jsonp({
    3. callback: 'cb',
    4. limit: 100,
    5. });
    6. app.router.get('/api/posts', jsonp, app.controller.posts.list);
    7. };

    事件代理Proxy

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

    1、写接口

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

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

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

  • 相关阅读:
    ORB-SLAM2 ---- Frame::UndistortKeyPoints函数
    详细图文手把手教你阿里云注册域名如何托管到CloudFlare DNS服务
    用Python制作我的核酸检测日历
    常见的Transforms(一)Compose & Normalize
    在 KubeSphere 部署 Wiki 系统 wiki.js 并启用中文全文检索
    GreenPlum DB向GBase迁移_TIME类型
    DMPE-PEG-Mal 二肉豆蔻酰磷脂酰乙醇胺-聚乙二醇-马来酰亚胺避光储藏
    技术分享 | MySQL Shell 定制化部署 MySQL 实例
    【无标题】
    Vim学习笔记
  • 原文地址:https://blog.csdn.net/m0_63470734/article/details/126163934