vue 跨域设置 proxy 为什么无效?决绝子了

// config 配置文件

const { defineConfig } = require('@vue/cli-service')
// module.exports = defineConfig({
//   transpileDependencies: true,

// })
module.exports = {

  devServer: {

    proxy: {
      "/api/": {
        target: 'https://echarts.apache.org/examples/data/asset/data/stock-DJI.json',
        changeOrigin: true, // 跨域访问设置，true代表跨域
        ws: true,
        'secure': true, // false为http访问，true为https访问
        // 'pathRewrite': { // 路径改写规则
        //   '^/api': "/" // 以/api/为开头的改写为''
        // }
      },
    },
  },
}

// url 
let url = '/api/'   //// 这里会匹配到前面我们设置的/api/'，代替为https://echarts.apache.org/examples/data/asset/data/stock-DJI.json,

      console.log('url', url)
      this.axios.get(url).then((rawData) => {}

// 运行结果
url /api/
:8081/api/:1     Failed to load resource: the server responded with a status of 404 (Not Found)

// 我希望的是 
https://echarts.apache.org/examples/data/asset/data/stock-DJI.json
这个链接 替换 let url = '/api/'

请求 是这样
 this.axios.get(https://echarts.apache.org/examples/data/asset/data/stock-DJI.json).then((rawData) => {}

实际请求时
 this.axios.get(/api/) => {}

我希望的是
https://echarts.apache.org/examples/data/asset/data/stock-DJI.json
这个链接 替换 let url = '/api/'

请求 是这样
this.axios.get(https://echarts.apache.org/examples/data/asset/data/stock-DJI.json).then((rawData) => {}

实际请求时
this.axios.get(/api/) => {}

到底要怎么搞

https://blog.csdn.net/tenc1239/article/details/131558639?spm=1001.2014.3001.5501

当使用Vue框架进行开发时，可以通过配置代理来解决跨域问题。然而，如果你已经正确设置了代理但仍然无效，可能是由于以下原因：

1. 代理配置错误：请确保在Vue项目的配置文件中正确配置了代理。常见的配置文件是vue.config.js。在该文件中，你需要指定目标域名和代理路径，例如：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

确保代理配置正确，目标域名和路径与你的实际需求相匹配。

2. 代理生效范围不正确：在某些情况下，代理可能仅适用于开发服务器而不适用于生产环境。确保你正在开发服务器中测试代理设置。如果你将项目部署到生产环境中，你可能需要考虑其他解决方案，如Nginx反向代理等。

3. 其他网络或服务器问题：如果代理配置正确但仍然无效，那么问题可能不在于代理设置。可能存在其他网络问题或服务器配置问题导致跨域仍然发生。你可以通过查看开发者工具中的网络请求和服务器日志来进一步调试和排查问题。

总结来说，如果Vue的代理设置无效，首先确保正确配置了代理，并注意代理生效的范围。如果问题仍然存在，你可能需要进一步检查网络和服务器配置，以确定问题的根源。

你看下我回答的这个问题，应该可以帮到你 https://ask.csdn.net/questions/7971697?answer=54256471&username=wordcsd&utm_medium=notify.im.haveAccept.20230629.a