Home >Web Front-end >Front-end Q&A >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!