egg框架中解决跨域的三种方案

方案一：利用egg框架提供的egg-cors插件实现cors跨域资源共享

1、在项目文件目录下下载插件，打开终端输入：npm i egg-cors。

2、打开项目的配置文件config。

2.1、打开plugin.js开启插件，在对象内复制上这段代码。

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

 2.2、打开config.default.js文件配置插件，在箭头函数内复制上这段代码：

 config.cors = {
        origin: '*',
        allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH'
  }

此时已经能够实现跨域访问了，这里的origin属性的值“*”表示所有页面都可访问，我们可以将*号换成我们指定的域名，但是它只能指定一个，如果要指定多个将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'
    };

方案二：实现jsonp

有两种方法：

1、在config.default.js文件配置以下代码：

config.jsonp = {
  callback: 'cb', // 识别 query 中的 `cb` 参数
  limit: 100, // 规定函数名的最大字符，这里设置最长为100个字符
};

然后在我们的路由文件中做如下操作：

module.exports = app => {
  const jsonp = app.jsonp();
  app.router.get("定义的接口地址", jsonp, app.controller."所在具体的位置");
};

2、直接在路由文件中配置

module.exports = app => {
  const jsonp = app.jsonp({
  callback: 'cb',
  limit: 100,
});
   app.router.get("定义的接口地址", jsonp, app.controller."所在具体的位置");
};

方案三：代理

代理是实际开发中运行最多的技术，在egg框架中不再运用request模块，而是利用浏览器自带的curl()方法，直接在我们自己的后端运用curl方法跨域请求资源。

代码如下：

//在逻辑控制层home.js中
async cors(){
    let data1=await this.ctx.curl("http://www.baidu.com",{method:"GET",data:{pwd:123}})
    this.ctx.body=data1
}

"http://www.baidu.com"为请求的网址，{method:"GET",data:{pwd:123}}可省，method为请求方法，data为传递的参数。

此时获得的data1为buffer二进制数据，我们还需要toString将其转为字符串。

补充一点：

 网络请求时  后端的处理顺序:  静态文件>路由匹配(按照顺序匹配)，即我们设置的数据接口地址不能与静态托管页面的地址相同，因为执行顺序是先执行静态托管的页面，执行完后就不再执行，永远请求不到我们的数据接口；
 "/*" 星号路由代表所有网址都能匹配。