Sharing experience in cross-domain request processing in Vue project development

With the continuous development and popularization of front-end technology, Vue, as one of them, has received more and more attention and application. In the development of Vue projects, cross-domain request problems are often encountered. How to deal with them so that the project can run normally? This article will share some cross-domain request processing experience in Vue project development based on personal experience.

First of all, what is a cross-domain request? To put it simply, web pages under one domain name cannot access resources under another domain name. Specifically, when the front-end and back-end are separated, when the front-end application (such as the Vue application) initiates a request to the back-end API, since the two are under different domain names, they will be restricted by the same-origin policy of the browser and cannot be accessed normally. At this time, you need to use some means to handle cross-domain requests.

1. Use a proxy

One of the common ways to handle cross-domain requests is to use a proxy. That is, set the proxy server address in the configuration file of the Vue application, first initiate a request to the proxy server, and then the proxy server forwards it to the back-end API. In this way, the front-end application can normally request data from the back-end API. In the Vue project, you can make the following settings in vue.config.js:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '/api': '/'
        }
      }
    }
  }
}

Among them, the target parameter points to the address of the backend API, changeOrigin indicates whether to modify the Origin attribute in the request header. pathRewrite is used to rewrite the request path, replacing the path starting with /api with Path starting with /.

2. Use JSONP

JSONP (JSON with Padding) is a method to implement cross-domain requests with the help of GET requests with the <script></script> tag. The specific implementation is to create a <script></script> tag in the front-end application, set the requested URL to the URL of the back-end API, and pass a callback function name in the URL, and the back-end API returns data. When the data is wrapped in the function call of the callback function name and returned, the front-end application can obtain the data through the callback function name. In the Vue project, the JSONP request can be implemented in the following way:

export function jsonp (url, data, callback) {
  let script = document.createElement('script')
  let params = ''
  for (let key in data) {
    params += `${key}=${data[key]}&`
  }
  url += '?' + params
  script.src = url + 'callback=' + callback
  document.body.appendChild(script)
  // 移除script标签
  script.onload = function () {
    document.body.removeChild(script)
  }
}

Among them, the url parameter is the address of the back-end API, the data parameter is the request parameter, callbackThe parameter is the callback function name. This method initiates a GET request by creating a <script></script> tag, and returns the request result to the callback function as a function call.

3. Use CORS

CORS (Cross-Origin Resource Sharing) is a standard cross-domain request solution, mainly involving the interaction between the browser and the server. By configuring the Access-Control-Allow-Origin attribute in the response header on the server side, the front-end application can be allowed to access the back-end API across domains. In the Vue project, you can set the withCredentials attribute of the XHR request to true to initiate a CORS request. The specific implementation is as follows:

export function xhr (method, url, data, headers) {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest()
    xhr.withCredentials = true
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(JSON.parse(xhr.responseText))
        } else {
          reject(xhr.statusText)
        }
      }
    }
    xhr.open(method, url, true)
    for (let key in headers) {
      xhr.setRequestHeader(key, headers[key])
    }
    xhr.send(data)
  })
}

Among them, the method parameter is the request method, the url parameter is the request address, the data parameter is the request parameter, headersThe parameter is the request header. This method creates an XMLHttpRequest object, sets its withCredentials attribute to true, initiates an XHR request, and returns the Promise result after the response is completed.

To sum up, by using proxy, JSONP and CORS to handle cross-domain requests, the Vue project can interact with front-end and back-end data normally, improving development efficiency and user experience. In specific applications, the appropriate method can be selected according to the project requirements and the back-end API interface.

The above is the detailed content of Sharing experience in cross-domain request processing in Vue project development. For more information, please follow other related articles on the PHP Chinese website!