Chrome 调试跨域问题解决方案之插件篇
跨域,就是A域名下的js,想请求B域名下的接口数据。
跨域,只存在于浏览器端。App和小程序不存在跨域问题。
跨域,分浏览器策略和服务器策略。
- 如果服务器配置了允许跨域,那就没有跨域问题
- 如果uni-app发布的H5页面和服务器接口部署在同一个域名下,那就没有跨域问题
- 如果服务器不能配跨域,开发期间为了调试方便,想让开发机的ip可以跨域访问服务器接口,那么可以在开发机chrome上安装一个跨域插件。详见下:
本插件并非万能,请仔细阅读与学习浏览器安全策略相关知识,请勿不看就喷,明白的请向下滚动继续阅读
当我们使用谷歌浏览器调试ajax请求的时候可能会遇到这两个问题:
最常见的就是关于跨域资源共享的问题,也就是我们通常说的跨域。当我们本地服务器预览页面,使用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安装即可
离线安装
国内用户如果无法在线安装,可在本页面底部下载附件,离线安装
- 下载得到:Allow-Control-Allow-Origin.crx
- 点击浏览器右上角的菜单按钮打开谷歌浏览器的扩展管理页面
- 将下载的扩展插件拖入扩展管理页面


使用方式
- 打开待调试的页面
- 在扩展栏目找到安装的插件,点击打开插件配置
- 输入想要进行跨域调试的接口的地址,点击添加即可
注意事项
- 此插件适合本地调试使用,线上部署如果和接口不同域还需要服务端配合。
- 如果实际响应的内容与浏览器预期的内容有差异还可能被CORB策略所阻止。
Chrome 调试跨域问题解决方案之插件篇的更多相关文章
- chrome 调试跨域iframe
相关链接:https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome https://stacko ...
- 利用ChromeCROSS可以在chrome浏览器上调试跨域代码
利用ChromeCROSS可以在chrome浏览器上调试跨域代码 1.下载ChromeCROSS文件,可百度下载,或者在我的百度云上下载:链接: https://pan.baidu.com/s/10_ ...
- chrome本地调试跨域问题
1.关闭chrome浏览器(全部) 我们可以通过使用chrome命令行启动参数来改变chrome浏览器的设置,具体的启动参数说明参考这篇介绍.https://code.google.com/p/xia ...
- angularjs跨域post解决方案
转自:http://www.thinksaas.cn/topics/0/34/34536.html 前端同学李雷和后台同学韩梅梅分别在自己电脑上进行开发,后台接口写好的时候,李雷改动完就把前端代码上传 ...
- uni-app运行到浏览器跨域H5页面的跨域问题解决方案
官方文档对跨域的解决方案推荐: https://ask.dcloud.net.cn/article/35267 更方便的解决方案 项目根目录直接创建一个vue.config.js文件,并在里面配置代理 ...
- vue.js及H5常见跨域问题解决方案
一.原生H5跨域问题解决方案 1.live-server 代理解决 首先在有node.js环境下,打开命令行工具,输入 npm install live-server -g 全局安装全局安装 live ...
- C#进阶系列——WebApi 跨域问题解决方案:CORS
前言:上篇总结了下WebApi的接口测试工具的使用,这篇接着来看看WebAPI的另一个常见问题:跨域问题.本篇主要从实例的角度分享下CORS解决跨域问题一些细节. WebApi系列文章 C#进阶系列— ...
- thinkphp,javascript跨域请求解决方案
javascript跨域请求解决方案 前言 对于很多前端或者做混合开发的同学,我们难免会遇到跨域发起请求业务,比如A站点向B站点请求数据等等.由于最近要做一个站点集群的项目,所以具体业务要求很多个站点 ...
- jquery跨域访问解决方案(转)
客户端“跨域访问”一直是一个头疼的问题,好在有jQuery帮忙,从jQuery-1.2以后跨域问题便迎刃而解.由于自己在项目中遇到跨域问题,借此机会对跨域问题来刨根问底,查阅了相关资料和自己的实践,算 ...
随机推荐
- Python--面向对象的程序设计之继承实现的原理(继承顺序)、封装、property
抽象类补充: import abc class Parent(metaclass= abc.ABCMeta): x=1 @abc.abstractclassmethod def foo(self): ...
- Spring 容器中bean的加载过程
bean 的加载过程大致可以分为以下几个步骤: 1.获取配置的资源文件 2.对获取到的xml资源文件进行解析 3.获取包装资源 4.解析处理包装之后的资源 5.加载 提取bean 并进行注册(添加到b ...
- windows10下安装Mysql 5.6(zip格式安装包)
5.6的安装包是一个zip文件,里面包含了data(有表空间文件和日志文件),bin等文件夹.不同于以往的只需要双击安装.msi就行了.因此,在此记录下安装包是.zip时的安装步骤. 1下载 进htt ...
- Github上的SlidingMenu菜单的使用方法
GitHub上的SlidingMenu的配置方法 1. 首先明确SlidingMenu是什么? 2. 如何使用SlidingMenu框架呢? GitHub上的SlidingMenu的配置方法 1. 首 ...
- php自带函数大全
php自带函数大全 http://blog.csdn.net/hopewtc/article/details/6797326 Abs: 取得绝对值.Acos: 取得反余弦值.ada_afetch: ...
- Insmod模块加载过程分析
一.背景 a) 在进行JZ2440的一个小demo开发的时候,使用自己编译的内核(3.4.2)及lcd模块进行加载时,insmod会提示加载失败因为内核版本不匹配(提示当前内核版本为空),并且显示模块 ...
- strlen、strcmp、strcat、strlen、memmove
#include <cassert> #include <iostream> using namespace std; /* strlen 返回字符串不包含结束符\0的长度 * ...
- Struts1.3——Struts入门
1.Struts的几个基本概念 1.struts是一个开源框架(frameset) 2.struts是一个Web框架 3.struts是一个基于MVC的Web框架 2.为什么有struts 因为我们对 ...
- 【lua学习笔记】——环境配置
1 开发平台 windows7 64位 2 下载链接 http://www.lua.org/download.html 3 安装完成-环境配置 4 运行 WIN+R 运行 cmd 运行lua,显示配 ...
- #include和前置声明(forward declaration)
#include和前置声明(forward declaration) 1. 当不需要调用类的实现时,包括constructor,copy constructor,assignment opera ...