How to make cross-domain requests in Vue?

Vue is a popular JavaScript framework for building modern web applications. When developing applications using Vue, you often need to interact with different APIs, which are often located on different servers. Due to cross-domain security policy restrictions, when a Vue application is running on one domain name, it cannot communicate directly with the API on another domain name. This article will introduce several methods for making cross-domain requests in Vue.

1. Use a proxy

A common cross-domain solution is to use a proxy. In this case, the Vue application bypasses the browser's same-origin policy by making an HTTP request to the same server. The server receives the requests and forwards them to the actual API. Since the proxy server is on the same domain as the API, the browser will not issue cross-domain security restrictions on this. Here is an example of how to set up a proxy:

// vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

In the above example, we proxy all requests starting with /api to https://example.comsuperior. changeOrigin is set to true to set the source to the address of target, and set pathRewrite to /api Remove from request.

2. JSONP (GET requests only)

JSONP is an old cross-domain solution that uses GET requests to dynamically add a 4fe3d359fc472be9c7e56823db19e0fe tag and add it Add to document.head. When the server returns data, set the name of the callback function to window.getdata, remove the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag in the callback function, and pass the data to resolveCallback.

3. CORS

Cross-Origin Resource Sharing (CORS) is a modern cross-domain solution that allows the server to specify which origins (domain names) have permission to access the API. The server does this by returning specific response headers. When the browser makes a cross-origin request, it requests the Server Access Control response header in the preflight request to verify whether the request is allowed. If the API returns this response header, the browser will allow cross-origin requests.

The following is an example of CORS:

export default {
  getData() {
    return fetch('https://example.com/data', {
      method: 'GET',
      mode: 'cors',
      headers: {
        'Access-Control-Allow-Origin': '*'
      }
    })
      .then(response => response.json())
      .then(data => data);
  }
}

In the above example, we use the fetch function to get the API data, while changing the mode Set to cors to enable CORS. We also set the Access-Control-Allow-Origin header in the request headers, which allows all origins to access the API. Note that for CORS to work properly, the server must return this header in the response.

Conclusion

You can use various methods such as proxy, JSONP and CORS to make cross-domain requests in Vue. Each method has its own advantages, disadvantages and applicable scenarios. When choosing to use a specific solution, consider the security of your API, the complexity of your requests, and the speed of your responses.

The above is the detailed content of How to make cross-domain requests in Vue?. For more information, please follow other related articles on the PHP Chinese website!