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

有的小伙伴在初学 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 跨域访问调试？点击查看

以上关于前端解决 has been blocked by CORS policy 跨域问题的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。