Vite Vue跨域失效

Question

#按照网上的方法配置跨域，但是就是不成功
vite.config,js:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    port: 5174,
    host: 'localhost', //前端服务启动后的访问ip，默认为localhost, host和port组成了前端服务启动后的访问入口。
    https: false,
    open: false,
    proxy: {
      // 自定义请求的开头,使用代理方式处理/demo开头的请求,/xxx可以自定义
      "/cloudhub": {
        // 往哪个服务器发请求
        target: "http://suggest.taobao.com",
        changeOrigin: true,
        pathRewrite: {
          // ^代表字符串开头,实际发送请求时,会把请求开头的/demo删除
          // 因为/demo并不是请求的一部分,只是个代理的标识
          "^/cloudhub": ""
        }
      }
    }
  }
});

App.vue:

<template>
  <div>
    <h1>发送HTTP请求,展示JSON数据</h1>
    <!-- 输入参数 -->
    <input v-model="para" type="text" placeholder="输入参数">
    
    <!-- 点击按钮触发请求 -->
    <button @click="sendRequest">发送请求</button>

    <!-- 显示返回的JSON数据 -->
    <div v-if="responseData">
      <h2>返回的JSON数据：</h2>
      <p>{{ responseData }}</p>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const para = ref('');
    const responseData = ref(null);
    // const address='/sessiontest';
    const proxysign='/cloudhub/sug'
    const sendRequest = () =>{
      if (para.value.trim() === '') {
        responseData.value = null; // 清空数据
        return;
      }
      // let url = proxysign+address;
      // console.log('url:'+url)
      //发送HTTP请求
      axios({
        method: 'get',
        url: proxysign,
        params: {
          code: 'utf-8',
          callback:'cb',
          q:para.value
        },
      })
      .then(response => {
        // 请求成功时将数据存储到responseData中
        responseData.value = response.data;
        console.log(response.data);
      })
      .catch(error => {
        console.error('请求出错', error);
      });
    };

    return {
      para,
      responseData,
      sendRequest,
    };
  },
};
</script>

运行截图：

可以看到“cloudhub”没有被替换成空串，并且跨域仍然限制，我不明白我哪里错了

Answer 1

【以下回答由 GPT 生成】

问题的根本原因是在Vite的开发服务器中，对于vite.config.js中的proxy配置，仅适用于在开发服务器中的前端请求，而不适用于打包后的生产环境。

解决这个问题的方法是，在Vue应用的代码中进行跨域请求，而不是在Vite的配置文件中进行跨域配置。

以下是解决方案的步骤：

1. 首先，在Vue应用的代码中，安装一个HTTP请求库，例如axios。

npm install axios

1. 在Vue应用的代码中，导入axios库。

import axios from 'axios';

1. 在sendRequest方法中，发送跨域请求。

methods: {
  sendRequest() {
    // 跨域请求的URL
    const url = 'http://suggest.taobao.com?param=' + this.para;

    // 发送跨域请求
    axios.get(url)
      .then(response => {
        // 请求成功，处理响应数据
        console.log(response);
      })
      .catch(error => {
        // 请求失败，处理错误
        console.error(error);
      });
  }
}

请注意，在代码中，我们直接使用了http://suggest.taobao.com作为跨域请求的目标URL，并将参数this.para拼接在URL上。

这样，当点击发送请求按钮时，就会发起跨域请求，并在控制台输出响应数据或错误信息。

通过以上步骤，你将能够成功地完成跨域请求。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^