Vue中出现跨域该如何配置代理请求，解决跨域请求。（嚼碎了给你肚子塞）

 

跨域错误代码示例

 

1、第一步

在vue项目目录中添加vue.config.js文件

2、在vue.config.js文件中配置代理

module.exports = {
  devServer: {
    proxy: {
//字段 /api 可以自行修改，但是请求数据时，在请求路径上记得要保持一致，请求配置中有写明，请仔细阅读
      '/api': {
//示例地址：     // http://search.m.dangdang.com/ddcategory.php?action=get_content&title=%E5%9B%BE%E4%B9%A6&pageid=712231
        target: 'http://cart.m.dangdang.com',
        changeOrigin: true,
        pathRewrite: {
//要与上面'/api'保持一致
          "^/api": ""
        }
      },
    },
  }
}

 3、在项目中请求服务器

 async mounted() {
    let result = await axios.get(
//vue.config.js文件中 taeget：的后缀  后缀中要在前面添加我们设置的/api（类似钥匙的意思）
      "/api/cart.php?action=cart_recommend&productIds=24184084&img_size=h"
    );
    this.list = result.data.data;
//接下来打印一下我们请求到的数据 
    console.log(this.list);
    
  },