前端解决 has been blocked by CORS policy 跨域问题__Vue.js__前端

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

在初学Vue，今天碰到一个让我脑壳疼的跨域问题，但是在我自己写的时候，百度出了好几种方法，都试过了，没啥太大的帮助。所以想借掘金记录一下这个错误，希望下次碰到时能快速的解决问题，也希望能够给和我一样的小白，在遇到这种问题时，带来帮助。虽然掘金大部分发表作品的人都是大神级别，不过，这是我在掘金上发表的第一篇文章，不喜还请勿喷，感谢！

下图为浏览器报错信息：

错误提示信息的结果为：已被CORS策略阻止，也就是指浏览器的安全策略 同源策略。

同源策略规定：1. 协议名，2. 域名/ip地址，3. 端口号，要求三者完全一致。只要有一个不一样，就是违背同源策略，产生跨域，只有全部一样，才符合同源策略。嘿嘿，不好意思，和标题扯得有点远了，那么我们继续返回正题。

我的情况是这样的： 我用了一个百度搜索的接口，用watch去监视，然后得到它的数据。

以下是我写的代码：

// 我用的是线上引入
// <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
// <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>

// html代码
<div id="app">
     <input type="text" v-model="inputValue" />
     <input type="button" name="" value="百度一下" />
</div>

// 网络接口(百度搜索)：https://www.baidu.com/sugrec?prod=pc&wd=1
// vue代码
const vm = new Vue({
    el: '#app',
    data() {
      return {
        inputValue: '',
      };
    },
    // 监视
    watch: {
      inputValue() {
        axios({
          method: 'GET',
          url: `https://www.baidu.com/sugrec`,
          params: {
            prod: 'pc',
            wd: this.inputValue,
          },
        })
          .then((response) => {
            console.log('请求成功:', response);
          })
          .catch((err) => {
            console.log('请求失败:', err);
          });
      },
    },
  });

代码看似没问题，但还是出现了图一中的跨域问题。

解决方案：

1、在桌面找到你调试用的浏览器，2、点击右键创建一个新的浏览器快捷方式，3、找到桌面快捷方式→右键→属性→快捷方式选项卡→目标，在后面追加以下参数

–user-data-dir=“c:\ChromeDebug” --test-type --disable-web-security

确认保存。点击快捷方式打开浏览器，在地址栏输入原来的链接地址、回车

Chrome浏览器如何开启Ajax跨域访问调试？点击查看