How to solve vue20 cross-domain proxy

With the continuous development and progress of web development, more and more front-end technologies and frameworks are widely used. As a modern JavaScript framework, Vue.js has become a popular choice for front-end development. In the development process of Vue.js applications, cross-domain is a problem that is often encountered. This article will introduce cross-domain issues in Vue.js 2.0 and their solutions.

1. What is cross-domain

In Web application development, when a page requests access to resources of another domain name from a website with one domain name, due to the browser’s same-origin policy restrictions, The resource cannot be obtained correctly. This is called cross-domain.

Specifically, the same-origin policy is the core and most basic security function of the browser. The same-origin policy requires that two URLs are allowed to access each other only if they have the same protocol, domain name, and port. Otherwise, cross-domain problems will occur.

In layman’s terms, suppose one website is called website A and another website is called website B. When website A requests data from website B through the browser, since website B is not in the domain where website A is located, the default In this case the browser will deny this access request.

2. Cross-domain issues in Vue.js 2.0

Since Vue.js 2.0 is a single-page application, its default development and production environments use local Node.js Server for development and testing. In this case, we often encounter cross-domain problems.

For example, we use axios to send an Ajax request to request JSON data from the backend server. The code is as follows:

import axios from 'axios'

axios.get('http://localhost:8080/api/data')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

In the above code, we try to send an Ajax request to the address http: The server at //localhost:8080/api/data sends a GET request, but since the browser does not allow such cross-domain access by default, an error will occur during operation.

3. How to solve cross-domain problems

In order to solve cross-domain problems, we need to specify a proxy server, start the server locally, and then forward all cross-domain requests to the server superior. Because the proxy server and backend server are both in the same domain, there is no cross-domain problem.

In Vue.js 2.0, we can use the proxyTable configuration item in webpack-dev-server to specify the proxy server. proxyTable is an object, each attribute in it is a proxy rule, in the form:

proxyTable: {
  '/api': 'http://localhost:9000'
}

In the above code, we will forward all requests starting with /api to the address: http://localhost:9000 on the server.

4. Sample code

The following is a sample code on how to use proxyTable to configure the proxy server:

// 代码文件：vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:9000', // 代理目标地址
        pathRewrite: { '/api': '' }, // 请求路径重写
        changeOrigin: true, // 允许跨域
      },
    },
  },
}

In the above code, we first need to configure Vue.js 2.0 Add a vue.config.js file to the project root directory, which is used to configure the server in the development environment. In devServer, we added a proxy attribute, which is an object that contains our proxy rules. We can set the proxy target address according to the actual situation of the backend API, such as http://localhost:9000.

We can also set the pathRewrite attribute to specify the rewriting rules for the request path. For example, when our request path is /api/data, we can use { '/api': '' } to remove the /api prefix, The request path becomes /data.

Finally, we also need to set the changeOrigin attribute to true to allow cross-domain access. Then we can happily use axios to send cross-domain requests:

import axios from 'axios'

axios.get('/api/data')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

5. Summary

This article introduces cross-domain issues in Vue.js 2.0 and their solutions. Due to the restrictions of the same origin policy, we cannot directly access resources under other domain names from the front-end application, but we can use a proxy server to bypass this problem. In Vue.js 2.0, we can use the proxyTable configuration item of webpack-dev-server to specify the proxy server to solve cross-domain problems.

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