Vue3.x axios跨域请求的问题

描述

一般请求的url地址与项目所在地址不一致便会触发跨域请求，若没有跨域措施，一般会抛出No 'Access-Control-Allow-Origin'  错误

解决方案

解决方案就是更改配置文件 vue.config.js，在 devServer 下配置 proxy

devServer: {
    proxy: {
      '/api': {
        target: 'https://xxx/',  //要跨域请求的地址url
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' //重写的路径
        }
      }
  }

之后再axios请求时直接写

axios.get('/api' + '/product/list')

这样的形式就可以了

大体理解就是 axios 请求时，遇到 /api 就替换为 https://xxx/ ，请求路径就是 pathRewrite，这里是空。所以调用/api，就相当于调用

https://xxx/

若改成

devServer: {
    proxy: {
      '/api': {
        target: 'https://xxx',  //要跨域请求的地址url
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/' //重写的路径
        }
      }
  }

最终结果一样

其他问题

'/createapi': {
        target: 'http://localhost:8080/sell/buyer/',
        changeOrigin: true,
        pathRewrite: {
          '^/createapi': ''
        }
}

有时候明明设置了代理，请求还是如此，但实际上，已经正确请求了，只是这样显示，不知道为何