首页 > 其他分享 >前端解决浏览器跨域问题

前端解决浏览器跨域问题

时间:2023-05-29 13:12:35浏览次数:29  
标签:web 浏览器 跨域 -- 前端 谷歌 security

  自从前后端分离后,浏览器做出了很多的限制,如产生跨域时将限制访问服务器,那要如何解决前端跨域的问题,下面将以谷歌浏览器(chrome)为标椎来提出一个简单且常用解决方案。


 

一、创建一个能够跨域的谷歌浏览器

下载并安装谷歌浏览器以后(如果已经拥有那就不用),右击谷歌浏览器使用快捷方式创建出另一个谷歌浏览器,此时两个是一模一样的,对新创建出来的那个浏览器进行命名,我这里命名为‘dev-env’,即开发环境,这样就会拥有一个正常的浏览器,一个可以跨域的浏览器。

二、开始解决跨域问题

1、新版浏览器跨域设置(版本号49之后的跨域设置)

查看谷歌浏览器版本号:

步骤:

(1)在电脑上新建一个空目录(任意位置,如果有D盘建议放在D盘,尽可能不要放在系统盘中) 例如 D:\MyChromeDevUserData
(2)右键点击谷歌浏览器,选择属性;
(3)在目标输入框尾部加上  --disable-web-security --user-data-dir=D:\MyChromeDevUserData
(4)点击 确定 关闭属性面板

注意:

(1)这里 --disable-web-security 前面有一个空格

(2)如果目标地址原先有引号,那么 --disable-web-security --user-data-dir=D:\MyChromeDevUserData 要加在 引号 外面

 

2、老版本Chrome浏览器(版本号49之前的跨域设置)

现在谷歌浏览器版本已经一百多了,但是考虑到一些老用户,这里也对老版本做出了跨域解决方案。

步骤:

(1)右键点击谷歌浏览器,选择属性
(2) 在目标输入框尾部加上 --disable-web-security
(3)点击 确定 关闭属性面板

注意:

(1)这里 --disable-web-security 前面有一个空格

 

三、查看浏览器能否解决跨域问题

打开新创建的谷歌浏览器,我这里是‘dev-env’,进入浏览器后如果出现“--disable-web-security”的提示,说明chrome就能正常跨域工作了。

标签:web,浏览器,跨域,--,前端,谷歌,security
From: https://www.cnblogs.com/cyy22321-blog/p/17440134.html

相关文章

  • 前端如何解决跨域问题
      跨域问题是指由于浏览器的同源策略(Same-OriginPolicy:两个页面具有相同的协议、主机和端口,三者有任一不相同即会产生跨域),导致不能在不同域名、协议或端口之间直接进行数据交互。跨域是浏览器的一种安全机制,服务端之间是不存在跨域的。如下表所示:解决方案JSONP:JSONP利用scri......
  • java爬虫htmlunit模拟浏览器登录
    介绍刚学到了一种超实用的java爬虫技术htmlunit,先记录一下。htmlunit其实就是一个没有界面的浏览器,操作很简单,就像自己在使用浏览器。本文介绍其简单的几个操作,仅初学了解htmlunit。第一是模拟登录网站,第二是获取网页html源码。准备下载htmlunit的jar包,点击进入官网下载,下载后,里面......
  • 前端页面Table CSS实现固定表头表首行和固定列拖动固定
    需要用到的2个属性table-layout:fixedposition:stickytable-layouttable-layout属性有两种特定值:auto(预设值)-表格的总宽度决定每一个储存格(cell)的最大值fixed-表格的总宽度决定于表格width的定义,以及各栏位(column)width的定义为了让表格呈现滚动效果,必须设定table-......
  • 最佳实践:基于vite3的monorepo前端工程搭建
    一、技术栈选择1.代码库管理方式-Monorepo:将多个项目存放在同一个代码库中▪选择理由1:多个应用(可以按业务线产品粒度划分)在同一个repo管理,便于统一管理代码规范、共享工作流▪选择理由2:解决跨项目/应用之间物理层面的代码复用,不用通过发布/安装npm包解决共享问题2.依赖管理-......
  • 如何在前端应用中合并多个 Excel 工作簿
    本文由葡萄城技术团队于博客园原创并首发。葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。前言|问题背景SpreadJS是纯前端的电子表格控件,可以轻松加载Excel工作簿中的数据并将它们呈现在前端浏览器应用的网页上。在某些情况下,您可能需要将来自多......
  • fetch跨域发送带凭据的请求
    发送带凭据的请求fetch('https://example.com',{credentials:'include'});当请求使用credentials:'include'时,响应的Access-Control-Allow-Origin不能使用通配符""。在这种情况下,Access-Control-Allow-Origin必须是当前请求的源。如果Access-Control-Allow-Or......
  • 九种跨域方式实现原理
    @目录前言什么是跨域?什么是同源策略及其限制内容?常见跨域场景跨域解决方案jsonpJSONP原理JSONP和AJAX对比JSONP优缺点JSONP的实现流程jQuery的jsonp形式cors简单请求复杂请求postMessagewebsocketNode中间件代理(两次跨域)nginx反向代理window.name+iframelocation.h......
  • 如何查询并复制edge浏览器的cookie
    步骤一按下F12,打开开发调试工具(如果打不开就按fn+F12试试)步骤二:点击Network(网络)步骤三:刷新网页查看Network界面的变化,点击Network界面下的Headers步骤四:找到Cookie并复制后面内容......
  • 前端自动识别CAD图纸提取信息方法总结
    前言CAD图纸自动识别和提取信息具有许多意义,包括以下几个方面:提高工作效率:传统上,对于大量的CAD图纸,人工识别和提取信息是一项耗时且繁琐的任务。通过自动化这一过程,可以大大提高工作效率,节省时间和人力资源。减少错误和精度提升:人工处理CAD图纸容易出现错误,例如错读数字或......
  • php如何连接前端
    PHP可以通过多种方式连接前端,包括使用HTML表单、AJAX技术和HTTP请求等。下面是一个使用HTML表单连接前端的示例代码:<!DOCTYPEhtml><html><body><formaction="process.php"method="post"><labelfor="name">Name:</label><br><......