Detailed solution to cross-domain problems when Vue uses Axios library to request data

During the development of VUE project, I encountered a problem. When using the Axios library to request data, an error prompts a cross-domain problem.

So how should we solve the problem in the situation of bad production?

It can be tried and solved in the following ways:

1. Set response headers that allow cross-domain requests

1.1 Add the Access-Control-Allow-Origin field in the response header and set its value to the source address that allows cross-domain requests.

For example, if your source address is http://localhost:8080, you can set the following response header:

Access-Control-Allow-Origin: http://localhost:8080

1.2 Here is a simple example showing how to set response headers using the server side.

const express = require('express')
const app = express()

// Set response headers that allow cross-domain requests((req, res, next) => {
  ('Access-Control-Allow-Origin', 'http://localhost:8080')
  next()
})

// Process GET requests('/api/data', (req, res) => {
  ({ message: 'Hello World!' })
})

// Start the server(3000, () => {
  ('Server started on port 3000')
})

In the above code, create a simple server using , the address that allows cross-domain requests is http://localhost:8080.

In each request, Access-Control-Allow-Origin is added in the response header and the value is set to http://localhost:8080 so that the browser does not block the sending of cross-domain requests.

1.3 The VUE application layer uses Axios to send a GET request and obtains the data returned by the server through the following methods.

.get('http://localhost:3000/api/data')
  .then(response => {
    ()
  })
  .catch(error => {
    (error)
  })

In the above code, use Axios to send a GET request to http://localhost:3000/api/data, get the data returned by the server, and print the returned message to the console.

It should be noted that in actual development, for the sake of application security, try to minimize the source address that allows cross-domain requests.

2. Use proxy proxy.

2.1 Configure the proxy in the VUE configuration file to forward the request to the target server.

For example, if the target server address is , you can add configuration in :

 = {
  devServer: {
    proxy: {
      '/api': {
        target: '',
        changeOrigin: true
      }
    }
  }
}

When the VUE sends a request, it will be proxyed to /api.

2.2 The following simple example how to use a proxy in a VUE project.

2.2.1 Install the http-proxy-middleware library

npm install http-proxy-middleware --save-dev

2.2.2 Configuring the Agent

const proxyMiddleware = require('http-proxy-middleware')

 = {
  devServer: {
    before: function(app, server) {
      ('/api', proxyMiddleware({
        target: '',
        changeOrigin: true
      }))
    }
  }
}

In the configuration file, create a proxy using http-proxy-middleware and apply it to all requests developed by /api.

In the configuration, the destination address is set to , and changOrigin is set to true, indicating that the correct Origin header will be set when sending the request.

2.2.3 Send requests in the VUE application layer.

('/api/data')
  .then(response => {
    ()
  })
  .catch(error => {
    (error)
  })

Here, the relative path /api/data is used to send a GET request, which will actually be proxyed to /api/data.

In this way, we can use the proxy functionality provided by VUE to forward cross-domain requests to the target server, thereby avoiding cross-domain issues.

Note: To ensure that the proxy function is working properly, the development server of the VUE application layer needs to be started under the same domain name and port as the proxy server.

3. Set withCredentials to solve the problem of cross-domain requests in VUE

3.1 Let Axios carry credential information in all requests.

import axios from 'axios';

 = true; // Set the withCredentials option to true
('/data')
  .then(response => {
    ();
  })
  .catch(error => {
    (error);
  });

3.2 Let Axios carry credential information in a single request.

('/data', {
  withCredentials: true
})
  .then(response => {
    ();
  })
  .catch(error => {
    (error);
  });

Note: When using withCredentials, the server needs to set the Access-Control-Allow-Credentials response header to true in order for the browser to accept cross-domain requests with credential information.

This is the article about the detailed explanation of the solution to cross-domain problems when Vue uses the Axios library to request data. For more related content on solving cross-domain problems, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!