Vue跨域问题——vue2.0 proxyTable配置,以及配置后为什么无法生效问题

最新推荐文章于 2024-08-21 09:09:03 发布

打代码的小天宇

最新推荐文章于 2024-08-21 09:09:03 发布

阅读量8.8k

点赞数 3

分类专栏： vue 前端跨域文章标签： vue.js

本文链接：https://blog.csdn.net/daimaxiaoyu/article/details/103927288

版权

vue 同时被 3 个专栏收录

11 篇文章 2 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

跨域

1 篇文章 0 订阅

订阅专栏

一.遇到的问题

今天在项目中需要访问网易云音乐中的歌手信息接口
通过axios调取接口后出现了如下问题
跨域问题报错
这就是因为跨域访问出现的问题

那么为什么会出现跨域问题呢？

因为因为浏览器同源策略的限制，不是同源的脚本不能操作其他源下面的对象

同源策略的概念

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
简单的来说:协议、IP、端口三者都相同，则为同源
在这里插入图片描述

二.解决方法

跨域的方法其实有很多，像是jsonp,通过后端配置cros等等，其实用后端来配置更加方便，但对于前端人员来说，下面这种直接在Vue中配置代理的方法更值得知晓
首先是来到config文件夹下面的index.js文件去配置proxyTable
我需要请求访问的URL是http://music.163.com/api/search/get/web?s=林俊杰&type=100

proxyTable的配置如下

在这里插入图片描述

proxyTable: {
      '/apis': {
        target: 'http://music.163.com',      //需要访问接口的域名
        changeOrigin: true, 			//是否需要跨域
        pathRewrite: {						//重写 '/apis' 为其他，默认为空或者'/'
          '^/apis': ''
        }
      },

在这里面 /apis 就相当于'http://music.163.com'
所以接下来接口需要添加的的url参数不需要再写接口的域名

下面是使用axios访问接口的代码

在这里插入图片描述
因为我的数据是定义在表单中的，所以穿的参数s和type也从data中获取

getImg() {
      this.axios.get('/apis/api/search/get/web',{
        params: {
          s: this.list.s,
          type: this.list.type
        },
      }).then( ({data:{result:{artists=[]}}}) => {
        const {picUrl} = artists[0]
        //console.log(picUrl)
        this.list.picUrl = picUrl
        console.log(this.list.picUrl)
      }).catch(error => {
        console.log(error)
        console.log('请求失败了')
      })
    }