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

有的小伙伴在初学Vue时,可能都会碰到一个让人脑壳疼的跨域问题,当初我自己写的时候,也遇到过跨域问题,虽然百度出了好几种方法,也都试过了,但没啥太大的帮助。所以想记录一下这个错误,希望下次碰到时能快速的解决问题,也希望能够给我一样的小伙伴,在遇到这种问题时,带来帮助。

下图为浏览器报错信息:

前端解决 has been blocked by CORS policy 跨域问题
错误提示信息的结果为:已被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

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

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

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

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 前端解决 has been blocked by CORS policy 跨域问题

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们