vue项目中如何解决跨域问题

在vue.config.js添加devServer
在这里插入图片描述

 devServer: {
    
    
    // host: '127.0.0.1', // 本地地址
    // port: 8084, // 端口号
    // open: true, // 配置项目在启动时自动在浏览器打开
    proxy: {
    
    
      '/api': {
    
     // '/api'是代理标识,一般是每个接口前的相同部分
        target: "https://www.wanandroid.com", // 请求地址,一般是服务器地址
        ws: true,//用于支持websocket
        changeOrigin: true, // 是否进行跨域
        pathRewrite: {
    
     // pathRewrite的作用是把请求接口中的 '/api'替换掉,一般是替换为空""
          '^/api': ""
        }
      }
      配置多个代理;请求前缀为/api2时,走下面的代理
      // ,
      // '/api2': { // '/api'是代理标识,一般是每个接口前的相同部分
      //   target: "https://www.wanandroid2.com", // 请求地址,一般是服务器地址
      //   ws: true,//用于支持websocket
      //   changeOrigin: true, // 是否进行跨域
      //   pathRewrite: { // pathRewrite的作用是把请求接口中的 '/api'替换掉,一般是替换为空""
      //     '^/api2': ""
      //   }
      // }
    }
  }

请求这边修改
在这里插入图片描述

const request = axios.create({
    
    
  // 接口的基准路径
  baseURL: '/api'
})

猜你喜欢

转载自blog.csdn.net/code_dream_wq/article/details/127957847