vue项目的跨域解决方式中代理服务器的实现方式代码示例

在Vue项目中，可以通过配置代理服务器来解决跨域问题。以下是一个简单的代码示例，展示了如何使用代理服务器解决跨域问题：

首先，在Vue项目的根目录下创建一个vue.config.js文件（如果已经存在则可以直接编辑）。
在vue.config.js文件中，添加以下代码：

module.exports = {
  devServer: {
    proxy: {
      '/api': {  // 需要跨域请求的路径
        target: 'http://example.com',  // 目标服务器地址
        changeOrigin: true,  // 是否改变源地址
        pathRewrite: {
          '^/api': ''  // 路径重写，将路径中的 '/api' 替换为空字符串
        }
      }
    }
  }
}

在上面的代码中，我们配置了一个代理服务器，将以/api开头的请求转发到http://example.com。例如，当我们发送一个请求/api/users时，实际上会被代理到http://example.com/users。

保存vue.config.js文件，并重新启动Vue开发服务器。

现在，你就可以在Vue项目中发送跨域请求了。例如，可以使用axios库发送一个请求：

import axios from 'axios';

axios.get('/api/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

这样，就可以通过代理服务器实现Vue项目的跨域请求了