zoukankan      html  css  js  c++  java
  • Chrome 调试跨域问题解决方案之插件篇

    跨域,就是A域名下的js,想请求B域名下的接口数据。
    跨域,只存在于浏览器端。App和小程序不存在跨域问题。
    跨域,分浏览器策略和服务器策略。

    • 如果服务器配置了允许跨域,那就没有跨域问题
    • 如果uni-app发布的H5页面和服务器接口部署在同一个域名下,那就没有跨域问题
    • 如果服务器不能配跨域,开发期间为了调试方便,想让开发机的ip可以跨域访问服务器接口,那么可以在开发机chrome上安装一个跨域插件。详见下:

    本插件并非万能,请仔细阅读与学习浏览器安全策略相关知识,请勿不看就喷,明白的请向下滚动继续阅读

    当我们使用谷歌浏览器调试ajax请求的时候可能会遇到这两个问题:

    • 跨域资源共享 详见:CORS
    • 跨源读取阻塞 详见:CORB

    最常见的就是关于跨域资源共享的问题,也就是我们通常说的跨域。当我们本地服务器预览页面,使用ajax访问远程服务器的内容时就会请求失败,比如:本地预览的地址是:http://localhost:8080/,访问的接口地址是http://dcloud.io/api。

    如果仅仅是为了本地预览,可以使用Chrome浏览器插件来协助调试。
    !!! 本插件只能解决简单请求的跨域调试(点击搜索什么是简单请求)。对于非简单请求的OPTION预检(点击搜索什么是预检请求)以及线上服务器也有跨域需求的用户,可以服务端配合解决

    插件名称:Allow-Control-Allow-Origin: *

    安装方式:

    在线安装

    使用谷歌浏览器直接打开插件地址https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi安装即可

    离线安装

    国内用户如果无法在线安装,可在本页面底部下载附件,离线安装

    1. 下载得到:Allow-Control-Allow-Origin.crx
    2. 点击浏览器右上角的菜单按钮打开谷歌浏览器的扩展管理页面
    1. 将下载的扩展插件拖入扩展管理页面

    使用方式

    1. 打开待调试的页面
    2. 在扩展栏目找到安装的插件,点击打开插件配置
    3. 输入想要进行跨域调试的接口的地址,点击添加即可

    注意事项

    • 此插件适合本地调试使用,线上部署如果和接口不同域还需要服务端配合。
    • 如果实际响应的内容与浏览器预期的内容有差异还可能被CORB策略所阻止。
     
  • 相关阅读:
    京东精益敏捷教练分享:敏捷助力产品创新!
    设计规范 | 详解组件控件结构体系
    Axure响应式进阶
    通讯录表设计
    TEST1
    c#练习四单元总结
    窗体控件应用总结(1)
    .NET(c#理解)
    test2-11
    test1-1
  • 原文地址:https://www.cnblogs.com/hpx2020/p/10973519.html
Copyright © 2011-2022 走看看