CROS和JSONP配置

跨域

1.egg-cors框架提供了 egg-cors 插件来实现cors跨域请求。

//1.下载

cnpm i --save egg-cors

//2.开启插件

// config/plugin.js文件

  cors:{

    enable: true,

    package: 'egg-cors',

  }

//3.配置插件  

// config/config.default.js文件

  config.cors = {

        origin: '*',

        allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH'

  }

   

//默认origin只支持一个域名或者*表示全部，如果想支持具体的多个指定域名可以如下设置：

    config.cors = {

        // origin: ['http://localhost'],

        origin:function(ctx) { //设置允许来自指定域名请求

            console.log(ctx);

            const whiteList = ['http://www.baidu.com','http://www.hqyj.com'];

            let url = ctx.request.header.origin;

            if(whiteList.includes(url)){

                return url;

            }

            return 'http://localhost' //默认允许本地请求可跨域

        },

        allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH'

    };

 

 

//4.使用:

//router.js文件

router.get('/cors',controller.home.cors)

//home.js文件

async cors(){

    this.ctx.body={ info:"这个接口可以通过跨域访问"}

  }

 

 

5. 注意:跨域前端请求时需要携带跨域凭证,不然缓存会失效

前端网络请求时配置:

原生ajax:

xhr.withCredentials = true;

axios:

axios.post(url,{},{ withCredentials:true}).then((res)=>{})

   

后端配置:

     config.cors = {

        origin: '具体的ip和端口 不能写* ',

        credentials:true  

  }

 

 

2.实现jsonp接口

//如果前端的参数中有cb=fn参数(jsonp接口参数),将会返回JSONP格式的数据,否则返回JSON格式的数据。

//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);

};

也可以直接在jsonp方法中直接配置,功能一样:

//如果前端的参数中有cb=fn参数(jsonp接口参数),将会返回JSONP格式的数据,否则返回JSON格式的数据。

// app/router.js文件

module.exports = app => {

  const jsonp = app.jsonp({

  callback: 'cb',

  limit: 100,

});

  app.router.get('/api/posts', jsonp, app.controller.posts.list);

};