解决Vue使用Api时的跨域问题

最近使用Vue做一个音乐播放器小项目，在本地测试时发现调用Api控制台总会报错。

记录一下解决问题的过程。

1. 问题原因

跨域：指的是浏览器不能执行其它网站的脚本，它是由浏览器同源策略造成的，是浏览器对javascript施加的安全限制。

同源策略：是指协议、域名、端口都要相同，其中有一个不同都会造成跨域，在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

比如这里我在本地测试使用的地址是http://localhost:8000，而我使用的Api却是https协议，就会造成跨域问题。

2. 解决跨域问题

2.1 配置baseURL

打开项目根目录下的main.js，添加全局axios和baseURL

import axios from 'axios'

Vue.config.$axios = axios
axios.defaults.baseURL = '/api'

2.2 配置vue.config.js

在项目根目录下新建vue.config.js，添加如下代码

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: '你的api域名',
                // 允许跨域
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}