Webpack + Vue sends HTTP requests to the local backend cross-domain issues

First, the problem description

Front End: Webpack + vue + Axios

Back end: Wamp + PHP

Access to the front-end page with Webpack requires a port, the backend server is also required a port, the port is different, the local debugging interface problems.

Second, the solution (do not use JSONP)

1) Install Proxy-middleware plug-in

NPM Install Proxy-middleware--save-dev

2) Rename Proxymiddleware in Dev-sever.js under the project directory under the Build folder to Httpproxymiddleware and replace all proxymiddleware in this file with Httpproxymiddleware,

and introduce the Proxy-middleware plugin in this folder:

Const PROXYMIDDLEWARE = require (' Proxy-middleware ')

3) Note The code of the middleware created by the original Proxymiddleware

Object.keys (proxytable). ForEach (function (context) {let  options = Proxytable[context]  if (typeof options = = =) String ') {    options = {target:options}  }  app.use (Httpproxymiddleware (Options.filter | | context, options)) })

4) Add the following code after the commented out code

App.use ('/api ', Proxy (Url.parse (' Https://example.com/endpoint ')));//Now Request '/api/x/y/z ' will be forwarded to ' https://example.com/ Endpoint/x/y/z '///Sample code//this. $axios. Post ('/api/admin/login ', {username:this.account, password:this.pwd}). Then ( Function (res) {//     Console.log (RES)//})

　　

Third, the (copy) test (the) chain (WHO) to connect (the)

Https://www.cnblogs.com/strinkbug/p/5808984.html

Front-end small white, welcome to Exchange

Webpack + Vue sends HTTP requests to the local backend cross-domain issues