vue 解决跨域

优雅格子衫

已于 2022-04-12 10:00:36 修改

阅读量637

点赞数

文章标签： vue.js 前端 javascript

于 2022-04-10 11:34:55 首次发布

本文链接：https://blog.csdn.net/qq_61869009/article/details/124075104

版权

直接在vue项目根目录下创建vue.config.js

创建完之后在vue.config.js里面做配置

这里我们就按照这个请求做演示 https://www.bilibili.com/index/ding.json 这里这个网址可以复制后直接浏览器访问，但是咱们用vue请求就会报跨域。这是因为浏览器的同源策略。

module.exports ={
  devServer:{
    // 跨域
    proxy:{
      '/api':{
        // 这里表示你要请求跨域的目标路径 https://www.bilibili.com/index/ding.json
        target:'https://www.bilibili.com',
        // 允许跨域
        changOrigin:true,
        // 重写路径
        // 这里重写路径是把前面的https://www.bilibili.com 给更换为 /api
        pathRewrite:{
          '^/api':''
        }
      }
    }
  }
}

这样就已经完成了咱们在发请求就可以直接用 /api/index/ding.json 来请求

    mounted () {
      // 解决跨域问题
      const url = '/api/index/ding.json'
      this.axios.get(url).then(res=>{
        console.log(res);
      })
    },

这里的实际路径是http://localhost:8080/api/index/ding.json 意思就是把https://www.bilibili.com 替换成了/api 然后让咱们本地启动的http://localhost:8080来进行访问。