跨域代理方法解决

为什么会跨域

原因： 浏览器受同源策略的保护 必须是域名端口协议全部相同才可以正常发请求

例如下图

但是你不可以直接把基地址改为 localhost:9528 因为如果再次运行调用就会变成localhost:9529 ，localhost:9530 ......... 脚手架服务器的地址会变
所以这个基地址不能写死！！！

解决方法：

去到写基地址的地方然后将路径改为 /api 这样就可以实现不管脚手架服务器地址怎么变都会拼接到基地址因为 '/api' 就是相对路径

此时基地址已经做了环境变量处理

/* 这是 封装基地址 */
const _axios = axios.create({
  baseURL: process.env.VUE_APP_URL
})



/* 这是 环境变量中的 写法   记得配置环境变量 .env文件*/
VUE_APP_URL = '/api'

配置好基地址后我们上面图片的第一条线就走通了
然后我们应该告诉脚手架服务器我们要请求的基地址是 localhost:3000

第一步 ：我们要去到 vue.config.js 文件中找到 devServer 在他里面写上代理(proxy) 然后我们要针对 /api 做处理只要是/api的就开始做代理但是不一定是/api 看情况自己处理

devServer  在他里面写上 代理(proxy


devServer: {
    // 开发环境服务器配制
    port: 1234, // 端口号
    open: true, // 自动打开浏览器
    overlay: {
      warnings: false,
      errors: true
    },
  /* proxy是代理 */
    proxy: {
    /* 你的基地址后面不一定是 /api 所以看情况写 */
    '/api':{  
    target: 'localhost:3000/api'   //原本的基地址是 localhost:3000/api 
    /* 内部规则：用target+/api（代理的值） 作用最终基地址 */
    pathrewrite:{  /* 这个方法是 不让他拼接 不让上面的内部规则执行 所以最终的基地址就是 http://localhost:3000/api */
      '^/api': ''  //这里的意思就是 将/api改为空  就可以去掉一个/api了  
    }
  }
    }
    // before: require('./mock/mock-server.js')
  },

这时候上面大图的第二条线也跑通了这时候就会自动 3 4 线往回跑就可以解决跨域问题了

温馨提示改完配置要重新启动脚手架

跨域代理解决进阶

以上的前提条件是接口能正常调用的情况下如何让 '/api'不写死而是写成process.env.VUE_APP_URL？？且如何让对象内添加以变量为名的 k 值

错误写法！！！！！

devServer: {
    // 开发环境服务器配制
    port: 1234, // 端口号
    open: true, // 自动打开浏览器
    overlay: {
      warnings: false,
      errors: true
    },
  /* proxy是代理 */
    proxy:{
  'process.env.VUE_APP_URL':{     如果是这样的话  是不可以的 因为他属于字符串了  这样写是错误的❌
    target: 'localhost:3000/api'   
    pathrewrite:{
      '^/api': ''  //这里的意思就是 将/api改为空  就可以去掉一个/api了  
    }
  }
}
    // before: require('./mock/mock-server.js')
  },

正确写法！！！！

一个对象内  想要加入一个 变量的值
  第一种写法：---> obj:{}中  想要加入 let a = 1--->  obj[a] = 1 --->  打印obj--->{ a:1 }
  第二种写法：--->obj2:{} 中加入 let a2 = 2---> obj2= { [a2]:2 }

devServer: {
    // 开发环境服务器配制
    port: 1234, // 端口号
    open: true, // 自动打开浏览器
    overlay: {
      warnings: false,
      errors: true
    },
  /* proxy是代理 */
    proxy:{
  [process.env.VUE_APP_URL]:{     
    target: process.env.VUE_APP_TARGET    //这里也可以用变量 去到对应的环境变量中设置一个新的基地址比如 VUE_APP_TARGET = 'localhost:3000/api'
    pathrewrite:{
      ['^'+ process.env.VUE_APP_URL]: ''  //这里的意思就是 将/api改为空  就可以去掉一个/api了  
    }
  }
}
  },

进阶写法 的好处是什么？好处就是以后修改直接去对应的.env文件中修改就好了不用东改一下西改一下

可写 可 不写   简化代码的作用


如果下面 不写  pathrewrite 这个对象  我们需要做些什么？？
 proxy:{
  [process.env.VUE_APP_URL]:{     
    target: process.env.VUE_APP_TARGET    //这里也可以用变量 去到对应的环境变量中设置一个新的基地址比如 VUE_APP_TARGET = 'localhost:3000/api'
  }
}

首先 搞清楚 target的内部规则是 将代理的值和 target做拼接 也就是  
  target: process.env.VUE_APP_TARGET 拼接 [process.env.VUE_APP_URL]
所以我们要做的是
  一： 去.env文件中  将基地址改为 你代理的值 例如---> VUE_APP_URL = '/api'--这样就可以直接拼接上去了
  二： 在.env文件中  将新设置的基地址 VUE_APP_TARGET = 'http://localhost:3000' 去掉/api
       这样就可以 最后只加一个 代理值了

跨域代理方法解决

为什么会跨域

解决方法：

跨域 代理解决 进阶

猜你喜欢

跨域代理解决进阶