Three solutions to solve cross-domain in egg framework

Option 1: Use the egg-cors plug-in provided by the egg framework to realize cross-domain resource sharing of cors

1. Download the plugin in the project file directory, open the terminal and enter: npm i egg-cors.

2. Open the configuration file config of the project.

2.1. Open plugin.js to open the plugin, and copy this code in the object.

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

2.2. Open the config.default.js file to configure the plug-in, and copy this code in the arrow function:

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

At this time, cross-domain access can be achieved. The value of the origin attribute here "*" means that all pages can be accessed. We can replace the * with the domain name we specify, but it can only specify one. If you want toSpecify multiple functions that change the origin property value to the following:

 config.cors = {// origin: ['http://localhost'],origin:function(ctx) { //Set to allow requests from the specified domain nameconsole.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' //By default, local requests are allowed to cross domains},allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH'};

Option 2: Implementing jsonp

There are two ways:

1. Configure the following code in the config.default.js file:

config.jsonp = {callback: 'cb', // recognize the `cb` parameter in querylimit: 100, // Specify the maximum character of the function name, here is set to a maximum of 100 characters};

Then do the following in our routing file:

module.exports = app => {const jsonp = app.jsonp();app.router.get("Defined interface address", jsonp, app.controller."Specific location");};

2. Configure directly in the routing file

module.exports = app => {const jsonp = app.jsonp({callback: 'cb',limit: 100,});app.router.get("Defined interface address", jsonp, app.controller."Specific location");};

Option 3: Proxy

Agent is the technology that runs the most in actual development. The request module is no longer used in the egg framework, but the curl() method that comes with the browser is used to directly use the curl method to request resources across domains in our own backend.

The code is as follows:

//In the logic control layer home.jsasync cors(){let data1=await this.ctx.curl("http://www.baidu.com",{method:"GET",data:{pwd:123}})this.ctx.body=data1}

"http://www.baidu.com" is the requested URL, {method:"GET",data:{pwd:123}} can be omitted, method is the request method, and data is the passed parameter.

The data1 obtained at this time is buffer binary data, and we also need toString to convert it into a string.

Additional point:

The processing order of the backend during network requests: Static files> route matching (matching in order), that is, the address of the data interface we set cannot be the same as the address of the statically hosted page, because the execution order is to execute the statically hosted page first, executeAfter that, it will no longer be executed, and we will never be able to request our data interface;
"/*" asterisk routing means that all URLs can be matched.