解决跨域-vue3利用服务器代理

在 Vue.js 的应用中，使用服务器代理（Proxy）来解决跨域问题可以通过配置 vue.config.js 文件来实现。以下是一种常见的解决方案，使用服务器代理将请求代理到目标服务器，避免浏览器的同源策略限制。

1. 创建或编辑 vue.config.js 文件：如果项目中没有 vue.config.js 文件，请在项目根目录下创建该文件。

2. 配置代理：在 vue.config.js 文件中，添加代理配置。例如：

   module.exports = {
     devServer: {
       proxy: {
         '/api': {
           target: 'http://api.example.com', // 要代理的目标服务器地址
           changeOrigin: true, // 开启跨域
           pathRewrite: {
             '^/api': '', // 路径重写，将 /api 替换为空字符串
           },
         },
       },
     },
   };
   

3. • '/api'：定义需要代理的请求前缀，例如请求 '/api/users' 将会被代理到 http://api.example.com/users。
   • target：目标服务器的地址。
   • changeOrigin: true：开启跨域，设置为 true 表示允许跨域请求。
   • pathRewrite：路径重写，可以根据需要重写请求路径。

4. 重启开发服务器：在配置文件修改后，重启 Vue 开发服务器使配置生效。

5. 在代码中发起请求：在 Vue 组件或其他地方，直接使用相对路径 /api 来发起请求，例如：

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

6. 这样配置后，所有以 /api 开头的请求都会被代理到 http://api.example.com，解决了跨域问题。

7. 通过以上步骤，您可以在 Vue.js 中使用服务器代理来解决跨域问题，确保在开发过程中能够顺利访问其他域下的接口数据。