方案一:利用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将其转为字符串。
补充一点:
网络请求时 后端的处理顺序: 静态文件>路由匹配(按照顺序匹配),即我们设置的数据接口地址不能与静态托管页面的地址相同,因为执行顺序是先执行静态托管的页面,执行完后就不再执行,永远请求不到我们的数据接口;
"/*" 星号路由代表所有网址都能匹配。