跨域配置代理

在Vue项目中解决跨域请求通常涉及到配置开发服务器（如Vue CLI内置的webpack-dev-server）或生产环境的反向代理服务器（如Nginx）。以下是一个使用Vue CLI和webpack-dev-server解决跨域请求的demo示例。

1. 使用Vue CLI和webpack-dev-server配置代理

Vue CLI项目在vue.config.js文件中提供了配置开发服务器代理的选项。你可以在这个文件中配置一个代理规则，将前端发出的跨域请求转发到后端服务器。

步骤：

1. 创建或打开vue.config.js文件： 如果你的Vue CLI项目根目录下没有vue.config.js文件，你可以创建一个。

2. 添加代理配置： 在vue.config.js文件中，添加devServer.proxy配置来设置代理规则。

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://backend-server.example.com', // 后端服务器的地址
        changeOrigin: true, // 是否改变源
        pathRewrite: { '^/api': '' }, // 路径重写规则
      },
    },
  },
};

在这个配置中，所有以/api开头的请求都会被转发到http://backend-server.example.com，并且路径中的/api前缀会被移除。

示例请求：

• 前端请求：http://localhost:8080/api/users
• 代理后请求：http://backend-server.example.com/users

2. 在Vue组件中发起请求

现在，你可以在Vue组件中使用axios或fetch来发起跨域请求，而不需要担心浏览器的同源策略限制。

<template>
  <div>
    <h1>Users List</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
    };
  },
  created() {
    this.fetchUsers();
  },
  methods: {
    async fetchUsers() {
      try {
        const response = await axios.get('/api/users'); // 使用代理后的URL
        this.users = response.data;
      } catch (error) {
        console.error('Error fetching users:', error);
      }
    },
  },
};
</script>

在这个示例中，axios.get('/api/users')会发出一个请求到http://localhost:8080/api/users，但由于我们在vue.config.js中配置了代理，这个请求实际上会被转发到http://backend-server.example.com/users。

注意：

• 代理配置仅适用于开发环境。在生产环境中，你通常需要在Web服务器（如Nginx）上配置反向代理。
• 确保后端服务器允许来自你开发服务器的请求。有时，后端服务器可能会根据请求的Origin头或其他因素来限制跨域请求。