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 <script on different domains>Label. By passing the callback function name as a parameter, the server can wrap the JSON data in the callback function and return it to the client. Because script sources are not affected by the Same Origin Policy, browsers do not restrict scripts returned from different domains. This method only works for GET requests as it has no request body. </script>

The following is an example of JSONP:

export default {
  getData() {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      const url = 'https://example.com/data?callback=getdata';

      script.src = url;
      document.head.appendChild(script);

      window.getdata = (data) => {
        document.head.removeChild(script);
        delete window.getdata;
        resolve(data);
      }
    });
  }
}

In the above example, we use Promise to encapsulate the JSONP request, create a <script></script> 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 <script></script> 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!