How to solve vue2.0 cross-domain proxy

In the development model where the front and back ends are separated, the front end usually obtains data by requesting the background interface through Ajax. However, due to the restriction of the same-origin policy, the front end can only request interfaces under the same domain name and cannot directly request interfaces under other domain names. This is the so-called cross-domain problem.

In order to solve cross-domain problems, we can use cross-domain proxy technology. In Vue2.0, you can implement cross-domain proxy by configuring webpack's proxyTable. Now we will introduce in detail how to configure cross-domain proxy in Vue2.0.

1. Install http-proxy-middleware

http-proxy-middleware is a Node.js proxy middleware that can forward the request proxy to the target server to achieve Cross-origin requests. We need to install http-proxy-middleware first:

npm install http-proxy-middleware --save-dev

2. Configure proxyTable

In Vue2.0 projects, the webpack configuration file is usually located in the project root directory config/index.js file. We need to configure proxyTable in this file:

dev: {
  // ...
  proxyTable: {
    '/api': {
      target: 'http://127.0.0.1:3000', // 目标服务器地址
      changeOrigin: true,  // 是否改变请求源
      pathRewrite: {
        '^/api': ''  // 路径重写
      }
    }
  }
},

In the above code, we configure a proxy rule to proxy requests starting with /api to the specified target server. If the requested URL is /api/user, it will be proxied to the interface http://127.0.0.1:3000/user. changeOrigin is used to set the host field in the request header, pathRewrite is used to rewrite the path, and remove the /api prefix.

3. Configure package.json

In the package.json file, we need to add the following code:

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev"
},

This will allow us to use npm run The dev command starts the development server, and the proxy rules are automatically loaded and used.

4. Using proxies in Vue files

In Vue single-file components that need to use cross-domain requests, we can directly use the /api prefix defined in the proxy rules To request data, as shown below:

// 请求当前登录用户信息
axios.get('/api/user').then(response => {
  this.user = response.data
}).catch(error => {
  console.log(error)
})

The above are the detailed steps for configuring cross-domain proxy in Vue2.0. By using proxy rules, we can successfully request interfaces under other domain names in the development environment, which facilitates collaborative development of the front and back ends.

The above is the detailed content of How to solve vue2.0 cross-domain proxy. For more information, please follow other related articles on the PHP Chinese website!