使用 XSwitch 前端调试解决跨域

最新推荐文章于 2024-04-08 09:37:17 发布
最新推荐文章于 2024-04-08 09:37:17 发布
阅读量4.3k 收藏 1
点赞数
分类专栏： http协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qdmoment/article/details/89521527
版权

前端资源发布为cdn后，嵌入到其他应用进而发布。这时进行数据联调时，会遇到浏览器的跨域问题。这时可以使用XSwitch浏览器插件进行调试。在访问应用时，把前端cdn的地址指向本地应用资源的链接，这样既可以解决登录态的问题，又可以解决跨域的问题。

使用方法如下：

首先安装XSwitch，

配置如下：

 

 

qdmoment
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
xswitch：用于重定向请求网址的Chrome扩展程序
01-29
XSwitch的 一个用来做请求链接转发的，因为采用的是浏览器原生API ，安全性和性能能得到保障。 功能 请求地址转发 整体插件启用开关 可替代浏览器缓存 采用以支持在转发规则中写注释 可以使用摩纳哥编辑器（VSCode）中的部分快捷键，比如通过⌘K ⌘F组合键可以实现格式化JSON的功能 自动补全 支持CORS，支持凭证 跨域和缓存分区键（快捷单击浏览器工具栏的XSwitch插件图标-设置） 分组规则 用法 所有的规则，会按照定义的顺序从前往后执行，直到匹配到了规则，也会继续往下匹配，直到最后一条启用的规则。 小提示：把HTTPS的链接转发到http://127.0.0.1下，浏览器不会出安全提示。习惯用localhost的同学，可以尝试下这个。 { // 转发规则 "proxy" : [ [ "//alinw.alicdn.com/platform/daily-test/isDaily.js" , // 匹配 URL "//alinw.alicdn.com/platform/daily-test/isDaily.json" // 替换成这
XSwitch一个用于转发请求网址的Chrome扩展程序
08-08
XSwitch一个用于转发请求网址的Chrome扩展程序
[杂谈]谷歌浏览器 XSwitch 插件 - 解决本地请求转发
最新发布
alexgaoyihang的专栏
04-08 477
软件行业从业者在日常工作过程中，经常会遇到请求转发的问题，本文介绍的XSwitch是一款应用于 Chrome 浏览器的请求转发插件。对这款插件进行总结就是 ： 将指定的特定 url 重定向 到你想定向的 url。作者近期由于 VPN 无法正常运行，在进行代码编写的过程中，发现部分网络请求无法正常访问，故此使用此插件将请求转发到本地进行代码编写与调试。
chrome插件，xswitch插件，前端代理
10-18
前端代理，chrome插件，xswitch插件
可能是最简单的解决本地开发接口请求跨域问题的方案
xyrshc的博客
09-28 1万+
这个问题出现的原因，很多时候是我们在本地起的 localhost 服务下，访问一些线上或者日常接口下出现的跨域提示。 跨域是由于浏览器安全策略，是正常的。 网上有很多方案，大部分都是需要做 Nginx 的反向代理来中转的，这种会有非常多的问题，而且过程复杂，浪费时间。 推荐的解决方案 安装一个 Chrome 插件，https://github.com/yize/xswitch。 比如...
XSwitch谷歌浏览器插件
08-29
XSwitch.crx插件解决本地开发请求转发的浏览器插件。 前端页面不发生改变，请求的后端地址可以转向需要请求的地址。
前后端联调，遇到跨域问题怎么办？用XSwitch
weixin_43228497的博客
01-14 1037
问题：前后端联调，前端本地调用我日常环境的接口，可是会遇到跨域问题，怎么办？ 解决方法：用XSwitch插件，日常资源代理到本地(本地代理日常接口的方式) 日常代理本地资源你可以试试XSwitch，这个插件可以代理 ...
跨域代理（谷歌浏览器插件x-switch）
congxue666的博客
02-19 2666
当我们的代码发到日常后，如果有bug需要修复，则就需要在本地上改后，提交代码并且发布到日常才能看到效果。这样的话，工作效率就会很慢。那么使用x-switch插件后就会解决这一尴尬了。 解决问题的步骤： 1.首先我们在谷歌商店下载x-switch插件。安装后，我们添加配置。 2.在日常的网页下，打开控制台的Element找到第二个script的src的链接，此链接就是日常环境的链接了。 3.找到此链接后，我们要进行配置，配置代码如下。我们只需要把https的链接替换掉就可以了。 { "pr
一招教你解决跨域问题!
pengjungui6的博客
12-07 998
推荐的解决方案 安装一个 Chrome 插件，https://github.com/yize/xswitch。 安装成功后  点击浏览器右上方插件图标： 下一步比如我们想要让 127.0.0.1 能够跨域访问 http://www.imooc.com/data/check.php 下的资源，那么只需要按下图配置下即可。   ...
前端接口跨域解决方案
bangbDIV的博客
08-04 590
1.nginx反向代理解决（访问nginx的端口，代理到首页访问） vim/usr/local/etc/nginx/nginx.conf 打开nginx配置文件,进行配置 server { listen 80; // nginx服务端口 server_name localhost; location / { ...
XSwitch-将前端服务请求转发至本地服务
weixin_33347188的博客
04-23 937
前后端分离项目，将非本地前端服务请求转发至本地后端服务
chrome插件XSwitch chrome插件XSwitch
03-22
chrome插件XSwitch chrome插件XSwitch
XSwitch-crx插件
04-01
语言:English 重定向URL并允许CORS使本地开发体验变得轻松愉快的工具。 重定向URL并允许CORS使本地开发体验变得轻松愉快的工具。 您可以使用它来将在线CDN或任何其他URL重定向到其他URL，例如本地文件/ CDN URL /内联JavaScript等。您还可以使站点启用CORS，仅对您而言很有趣。
xswitch-community
01-15
xswitch-community
XSwitch 1.17.1.crx
03-16
XSwitch 1.17.1.crx
http协议和Tcp协议的区别，http协议详解
热门推荐
前端361
07-04 2万+
TCP协议对应于传输层，而HTTP协议对应于应用层，从本质上来说，二者没有可比性。 1，http对应于应用层 2，Tcp协议对应于传输层 3，http协议是在Tcp协议之上建立的，http在发起请求时通过tcp协议建立起连接服务器的通道，请求结束后，立即断开tcp连接 说明：从HTTP/1.1起，默认都开启了Keep-Alive，保持连接特性，简单地说，当一个网页打开完成后，客户端和服务器...
cdn实现原理和浏览器缓存的区别
前端361
07-22 1230
cdn（Content Delivery Network）delivery 英:[dɪ'lɪv(ə)ri] 传送 传递 cdn组成： CDN是一种组合技术，其中包括源站、缓存服务器、智能DNS、客户端等几个重要部分。 核心是智能DNS。 CDN加载过程： 客户端输入url ----> dns域名服务器对域名进行解析 -----> 域名解析权交给CNAME指向的...
关于http缓存的分类和生效场景
前端361
07-15 802
http缓存再网络性能优化中很重要的地位，总的来说，http缓存分为两个大类，强制缓存和对比缓存。 强制缓存是靠设置缓存失效时间，在有效时间内，缓存不会失效，浏览器会直接从浏览器缓存中读取资源。 强制缓存主要是靠设置header中的expires和cache-control两个字段 cache-control主要设置项有以下几个选项： private: 客户端可以缓...
前端怎么打包才能使用xswitch插件
05-01
要想在前端使用xswitch插件，需要将插件进行打包并引入到项目中。打包可以使用类似webpack这样的构建工具，以下是具体的步骤： 1. 将xswitch插件下载或者克隆到本地； 2. 进入xswitch目录中，使用npm或yarn等包管理工具安装依赖； 3. 在目录下找到webpack.config.js文件，修改为以下配置： ``` module.exports = { entry: './src/index.js', output: { filename: 'xswitch.js', library: 'XSwitch', // 将插件打包成一个名为XSwitch的库，可以在Html中通过<script>标签引入 libraryTarget: 'umd' // 将commonJS和AMD合并为一个库 } } ``` 4. 在当前目录下执行npm run build命令，就可以在dist目录下生成xswitch.js文件； 5. 将打包好的xswitch.js文件引入到Html中即可使用该插件。 需要注意的是，如果前端项目是通过Vue Cli等脚手架生成的，可以考虑在vue.config.js文件中进行配置，使用chainWebpack对打包的插件进行处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值