vue的proxyTable跨域处理

当我们请求的地址出现不符合同源策略的时候，就会出现跨域的问题，这里仅对在vue 项目中使用axions请求跨域做记录

跨域报错截图

案例：请求"https://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=10"中的数据

分析
问号（?）之前的为我们要请求的后端地址，包含协议、域名、地址等等
问号（?）之后的内容为我们需要提交的参数，参数之间用&连接

解决方案

1、配置跨域
在项目中与src同级下有一个config文件夹，打开这个文件夹中的index.js文件

2、在index.js文件的 module.exports 中的 dev 中的 proxyTable 进行跨域配置

module.exports = {
  dev: {
  ...
    proxyTable: {
      '/api': {  //这里的/api，就是我们在target里写的要请求的后端接口
        target: 'https://cn.bing.com/', 
        //要请求的后端接口地址，一般写多个数据接口的共同内容，后面的地址根据请求数据的不同，在请求的时候再拼接上就好
        changeOrigin: true, //是否允许跨越
        pathRewrite: {
          '^/api': '', //重写,一般情况下不需要
        }
      }
    },

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be 
  },
  ...
}

2、使用axios请求数据

methods:{
getData(){
axios
    .get("/api/HPImageArchive.aspx", {   
       params: {
         format: "js",
         idx: 0,
         n: 1
       }
     })
     .then(function(response) {
       console.log(response);
     })
     .catch(function(error) {
       console.log(error);
     });
 }
}
 //get:请求方式 
 // "/api/HPImageArchive.aspx"：请求地址，这里的api一定不能忘记，它代表着我们在请求地址前面部分
 // params: 我们需要带上的参数就写这个对象中
 //.then： 请求成功之后，要执行的代码块
 //.catch： 请求失败之后，需要执行的代码块
 

注意事项

1. 在配置好跨域之后，请求的时候，一定不要忘记在前面加上/api
2. 如果有修改congfig中的配置，一定记得重启服务，否则你的修改浏览器可能不会给于响应，让你白忙活半天
3. 如果自己觉得都没有问题还一直不成功，记得打开network进行查看，不要一味的盯着自己的代码和报错
4. 在network中，可以查看自己的请求地址是否有误，需要携带的参数是否有带上，以及参数是否正确