vue项目——多次跨域 反向代理

1.项目开发中，我们访问后端接口时域名通常和我们本地运行不同，这里就涉及了跨域。

2.本项目使用vue-cli3脚手架搭建，搭建完成时需要自己新建一个vue.config.js文件，文件里进行相应的配置(反向代理)。大概配置如下：

module.exports = {
  devServer: {
    open: true, // 配置自动启动浏览器
    proxy: {
      '/api': {
        target: 'http://127.0.0.8:3000/', // 设置你调用的接口域名和端口号
        // ws: true, // 是否启用websockets
        changeOrigin: true, 
        pathRewrite: { '^/api': '/' } // 这里重写路径
http://127.0.0.8:3000/user/login
      },
    }
  }
}

而我需要访问的接口路径为：http://127.0.0.8:3000/user/login

我在使用axios来get / post时的请求为：

 请求成功！

3.在做的过程中发现不仅仅访问接口的时候涉及跨域，在访问第三方资源的时候(比如这边需要加载音频，加载的路径又是另外一个域名)也要涉及跨域，这样就涉及到了多次跨域：

module.exports = {
  devServer: {
    open: true, // 配置自动启动浏览器
    proxy: {
      '/api': {
        target: 'http://52.163.245.77:3000/', // 设置你调用的接口域名和端口号
        // ws: true, // 是否启用websockets
        changeOrigin: true, 
        pathRewrite: { '^/api': '/' } // 这里重写路径
      },
      '/zhou': {
        target: 'http://www.voice.io/', // 设置你调用的接口域名和端口号
        // ws: true, // 是否启用websockets
        changeOrigin: true, 
        pathRewrite: { '^/zhou': '/' } // 这里重写路径
http://www.voice.io/this.sPath
      }
    }
  }
}voice

 

 同理只需要在proxy中在设置就可以，但是在写的过程中发现不可以再写"/api2"，好像是因为和上面那个"api"会发生冲突，所以我这边换成另外一个完全新的"/zhou"。

需要访问的路径为：http://www.voice.io/this.sPath 

这里我是使用wavesurfer.js插件的load()方法加载： 

 加载成功！

参考链接：

https://www.cnblogs.com/mp1994/p/10938561.html

https://www.jb51.net/article/159400.htm

同源策略可参考：(是我自己在做笔记方便查看哦！不需要可以跳过~)

https://www.cnblogs.com/wangyueping/archive/2018/10/11/9774920.html