Cross-domain Webpack + vue-cil in cross-domain proxytable

Cross-domain understanding of the same-origin policy: the so-called "homologous" refers to the "three Same".

• Same protocol
• Same domain name
• Same port

Resolving cross-domain

1. Jsonp disadvantage: Only get request, need to modify the code of site B
2. The disadvantage of cors is that IE6 7 is not compatible (but not necessarily compatible). Need B website to add header in response
3. PostMessage disadvantage is also IE6 7 compatibility is not good (it is not necessarily compatible). Need to modify the code of site B
4. IFrame Window.name is worthy of a clever way, compatibility is also very good. But you also need to be able to modify the B site code
5. Service side unsolicited request B site, compatibility and your client's code is still the original Ajax, the disadvantage is not feeling good. (There is no cross-domain security limit on the server side)
6. Similar to 5 with Nginx to the B site's data URL reverse proxy.

node, express solves cross-domain

• Plus the request header:

1App.all (' * ', (req, res, next) ={2Res.header ("Access-control-allow-origin", "*");3Res.header ("Access-control-allow-headers", "Content-type,content-length, Authorization, Accept,x-requested-with");4Res.header ("Access-control-allow-methods", "Put,post,get,delete,options");5Res.header ("x-powered-by", ' 3.2.1 ')6 7     if(req.method== "OPTIONS") res.send (200);/*get the options request back quickly*/8     Elsenext ();9});

The point is, vue-cli. Handling cross-domain

• The front and back end of the project, often developed, the interface address of the request has a cross-domain problem
• Webpack front and rear end separation Development Interface Debug solution, Proxytable Solution
• The index.js file under the Config folder in the root directory will be found in the project directory first. Since we are using it in a development environment, it is natural to configure it in Dev:

1port:8080,2 proxytable: {3'/api ': {4Target: ' http://www.ainyi.com ',//Destination interface domain name5Changeorigin:true,//whether cross-domain6     //Secure:false,//If it is an HTTPS interface, this parameter needs to be configured7 pathrewrite: {8' ^/api ': '//overriding interfaces, generally without changing9     }Ten   }, One},

• '/api ' is the match, target is the requested address
• The above code indicates that, as long as the interface is HTTP://WWW.AINYI.COM/API, it will be proxied by the local 8080 port request:

  Http://localhost:8080/api ===> Http://www.ainyi.com/api

• That is, to request the interface Http://www.ainyi.com/api, is through the HTTP://LOCALHOST:8080/API proxy access, will not produce cross-domain.
• This will not require the Axios configuration Axios.defaults.baseURL, all interfaces are local agents

Cross-domain Webpack + vue-cil in cross-domain proxytable