egg框架实现跨域

1.egg-cors

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

1.下载插件：在app文件夹的上一层文件所在目录打开cmd.exe输入指令npm i egg-cors

2.开启插件：在config/plugin.js文件中写入以下代码：

 cors:{
 
enable: true,

package: 'egg-cors',

 }

config/plugin.js文件：是将插件引入项目

3.配置插件：在config/config.default.js文件中写入以下代码：

第一种：默认origin只支持一个域名或者*表示全部：

config.cors = {

  origin: '*',
  
  allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH'
  
}

第二种：想只支持具体的多个指定的域名：

config.cors = {

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

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

    console.log(ctx);
    
    const whiteList = ['http://www.baidu.com','http://www.jiujin.com']; 
    
    let url = ctx.request.header.origin;
    
    if(whiteList.includes(url)){
    
        return url;
        
    }
    
    return 'http://localhost' //默认允许本地请求可跨域
    
},

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

};

config/config.default.js文件：配置各种插件功能

4.使用：在router.js文件中：注册路由

在home.js文件中：做跨域请求

注册路由：/login

后端返回前端的数据：

前端发送请求：

跨域请求结果（因为我前面配置origin：“*”，所以我后端的所有的网址都允许被跨域请求）：

2.jsonp

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

第一种方法：1.在config/config.default.js文件中配置插件功能：

也就是下面这行代码：

假如有一个网址www.baidu.com/index.html?…

配置插件：

config.jsonp = {

 callback: 'cb', // 识别 query 中的 `cb` 参数
 
 limit: 100, // 函数名最长为 100 个字符，cb=后面的字符不能超过100
 
};

写接口（也就是注册路由）：

在router.js文件中注册路由：

前端做网络跨域请求：

在home.js文件写后端返回数据给前端

代码执行结果：

第二种方法：

直接在jsonp方法中直接配置，功能是一样的：（就是省去在config/config.default.js文件的这一步，直接在router.js文件中直接写）

3.代理服务

后端也可以做网络请求：curl（网络请求工具）

第一种：

在home.js文件中后端向其他后端做网络请求：

前端对后端做网络请求：

后端注册网址：

代码运行结果：

第二种：和上面那个是一样的：

option常用配置:

 method:'GET/POST'

data:{name:"karen"}//会自动字符串化

第六天学习后端——egg跨域