How to handle cross-domain requests in Vue projects

How to handle cross-domain requests in the Vue project requires specific code examples

With the rapid development of front-end development, cross-domain requests have become a common problem . Due to the browser's same origin policy restrictions, when we need to send requests to different domain names or ports in the Vue project, we will encounter cross-domain problems. This article will introduce how to handle cross-domain requests in the Vue project and provide specific code examples.

1. Back-end settings CORS (cross-domain resource sharing)

On the back-end server, we can allow cross-domain requests by setting CORS. Taking the Express framework of Node.js as an example here, you can use the cors middleware to set up CORS.

1. First, install cors middleware:

npm install cors --save

2. Introduce cors into the entry file of the back-end server and set related configurations:

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

app.use(cors({
  origin: 'http://localhost:8080', // 允许访问的源地址
  credentials: true // 允许发送cookie
}));

// 其他后端逻辑

In the above code, origin specifies the source address that is allowed to be accessed. Here it is set to http://localhost:8080. You can modify it according to the actual situation. credentialsSpecify whether to allow cookies to be sent, which can be set according to project needs.

2. Front-end project configuration

In the Vue project, you can implement cross-domain requests by configuring proxyTable. In the index.js file in the config directory, you can find the following code:

module.exports = {
  // ...
  dev: {
    // ...
    proxyTable: {
      // 代理示例
      '/api': {
        target: 'http://localhost:3000', // 接口的域名
        changeOrigin: true, // 允许跨域
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

In the above code, we configure a proxy through proxyTable. When accessing the interface starting with /api, Will be proxied to http:/localhost:3000. changeOrigin in the configuration is set to true to allow cross-domain.

3. Send cross-domain requests in the Vue component

In the Vue component, you can directly use tools such as axios or fetch to send cross-domain requests.

1. First, install axios:

npm install axios --save

2. Introduce axios into the Vue component that needs to send cross-domain requests:

import axios from 'axios';

// ...

export default {
  // ...
  methods: {
    fetchData() {
      axios.get('/api/data')
        .then(response => {
          // 处理响应数据
        })
        .catch(error => {
          // 处理错误
        });
    }
  }
}

In the above code, we send a GET request to /api/data through axios. In the project generated by vue-cli, due to the configuration of proxyTable, the actual request will be proxied to http://localhost:3000/data.

In addition to axios, you can also use tools such as fetch to send cross-domain requests. The specific usage is similar.

Summary

This article introduces how to handle cross-domain requests in the Vue project and provides specific code examples. By setting CORS on the backend and configuring the front-end project, we can easily solve the problem of cross-domain requests. In the actual development process, we need to configure it accordingly according to the specific conditions of the project to ensure that the request can send and receive data normally.

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