前端解决 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. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 前端解决 has been blocked by CORS policy 跨域问题

发表评论

前端开发相关广告投放 更专业 更精准

立即查看 联系我们