vue项目中跨域问题的处理

在数据请求当中，由于不同源造成的跨域问题【跨域问题后面再整理写一篇】

比如我要获取拉钩网的数据，这时候就会出现跨域问题

在vue项目中处理跨域问题的配置文件是vue.config.js

可以按照这个文档来配置就行

主要用到是里面的devServer.proxy

比如我想获取拉钩网（https://m.lagou.com/listmore.json）这个数据，然后这里写下跨域问题的处理

// 这里写处理跨域问题

module.exports = {
    // module.exports是common.js的模块化，node中用
    devServer: {
        
      proxy: {
        //   第一个数据源
          // https://m.lagou./com/listmore.json
        '/listmore': {
          target: 'https://m.lagou./com',
        //   ws: true,这个不用
        // 在com之前都是域名，取域名后第一个字段
          changeOrigin: true
        },
        // 第二个数据源
        // https://sentry.music.163.com/wapm/api/sdk/collect
        '/wapm': {
          target: 'https://sentry.music.163.com',
          changeOrigin: true
        }
      }
    }
  }

然后在mouted钩子函数中的axios中写

//! 没有跨域的情况下是写=> axios.post('https://sentry.music.163.com/wapm/api/sdk/collect'

axios.post('/wapm/api/sdk/collect', {
//这里写的是域名后面的那串
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

如第二个的post请求中的axios中的数据写在浏览器这里的这块

以第二个数据源为例，这个跨域请求的意思大概就是：
在本地的http://localhost:3000中的页面里：

axios说：“我要向https://sentry.music.163.com/wapm/api/sdk/collect 发起请求！！
我写个
axios.post(‘https://sentry.music.163.com/wapm/api/sdk/collect’”

浏览器说：“哦哟，不行，你们都不同源，不能让你随便访问别人的数据！”

axios:“那我写个反向代理！”

vue.config.js中的devServer.proxy说：“在我这里写，我负责当个中间人转接下你们的消息，
‘/wapm’: {
target: ‘https://sentry.music.163.com’,
changeOrigin: true
}”

'/wapm’表示在数据请求中，遇到 /wapm 开头的数据请求时，浏览器原本的http://localhost:3000变成https://sentry.music.163.com，这样数据请求时就同源了，这时候这个反向代理就相当于一个代理人去帮这个主机谈事情一样！！！"

axios:“那我将数据请求源写成/wapm开头那后面一段，然后反向代理一找到我这里就知道我要去哪个源拿数据啦！！！”

然后就这么和谐地解决了问题！