Vue中的跨域问题

今天用新浪的疫情数据接口时报错如下:

很明显是跨域问题

解决方法:(默认用axios)

1. 安装所需中间件:

npm i http-proxy-middleware

2. 在main.js中配置BaseUrl 代码如下:

import axios from 'axios'

axios.defaults.baseURL = '/api'
Vue.prototype.$http = axios

作用是每次发送请求都会带一个/api的前缀

3. 配置代理: 项目根目录下有个vue.config.js(没有自己新建),做如下处理

module.exports = {
  devServer: {
    port: 8080,
    host: '0.0.0.0',
    proxy: {
      '/api': {
        target: 'https://interface.sina.cn/news/wap',//目标地址
        ws: true,//是否代理websocket
        changeOrigin: true,//是否跨域
        pathRewrite: {
          '^/api': ''//url重写
        }
      }
    }
  }
}

4. 具体使用axios的地方url改成接口剩下的部分,比如我使用的接口为https://interface.sina.cn/news/wap/fymap2020_data.d.json
   那么代码就该为:axios.get('/fymap2020_data.d.json').then(res => {})
5. 重新启动项目, 跨域问题已经解决