Example tutorial of cross-domain webpack development environment

This article mainly introduces the detailed explanation of the cross-domain development environment of vue-cli webpack. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look

edit dev.proxyTable option in config/index.js. The dev server is using http-proxy-middleware for proxying

In order to solve the cross-domain problem,

1. Usually Jsonp is used, but jsonp can only be a get request.

2. Or use CORS support and set Access-Control-Allow-Origin: *

0 Prerequisite skills

Familiar with vue-loader and webpack

1 Basic configuration

Edit the confix/index.js file. The dev server uses http-proxy-middleware. Proxy

// config/index.js
module.exports = {
 // ...
 dev: {
  proxyTable: {
   // proxy all requests starting with /api to jsonplaceholder
   '/api': {
    target: 'http://jsonplaceholder.typicode.com',
    changeOrigin: true,
    pathRewrite: {
     '^/api': ''
    }
   }
  }
 }
}

The above example will proxy the request /api/posts/1 to http://jsonplaceholder.typicode.com/posts/1.

2 Global Match

You can provide a filter option that can be a custom function to determine whether a request should be proxied:

Provide a filter to formulate routing rules and routing methods.

proxyTable: {
 '*': {
  target: 'http://jsonplaceholder.typicode.com',
  filter: function (pathname, req) {
   return pathname.match('^/api') && req.method === 'GET'
  }
 }
}

【Related recommendations】

Javascript free video tutorial

2. Detailed examples of Bootstrap form validation formValidation

3. OffsetWidth bugs and processing methods in JS

4. jQuery Validate detailed examples of verifying multiple names

5. Detailed example of easyUI drop-down list click event

The above is the detailed content of Example tutorial of cross-domain webpack development environment. For more information, please follow other related articles on the PHP Chinese website!