新版chrome浏览器设置允许跨域的实现

  发布时间:2020-11-30 11:39:38   作者:haorooms   我要评论
这篇文章主要介绍了新版chrome浏览器设置允许跨域的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

目前前端解决跨域,主要是通过webpack的devServer来配置。但是有时候开发环境中没有配置devServer,后端又没有设置跨域。前后端分离项目,本地调试代码的时候,经常会遇到跨域问题。本文主要是对之前文章浏览器跨域访问解决方案,做一个补充吧,因为这篇文章最后对chrome设置方式,目前设置不起作用了,更新文章,修正一下。

解决--disable-web-security 不起作用的方案

之前文章,提供了windows,mac,linux等设置--disable-web-security的方式,但是chrome新版本安全策略升级,这种打开方式或者之前的设置方式是无效的。那么如何解决呢?

一、设置跨域,在chrome快捷方式右键‘属性’,‘快捷方式’,‘目标’ 路径最后边按一下空格,再添加以下代码:

--args --disable-web-security --user-data-dir=D:\HaoroomsChromeUserData

或者

--disable-web-security --user-data-dir=D:\HaoroomsChromeUserData

D:\HaoroomsChromeUserData 是我自己随便找了个文件夹,可以自己随便配置,不这么写的话,新版本浏览器可能出现设置不生效的问题

这个方式等于是用户在自己电脑创建了一套chrome的私有化浏览器,里边的设置配置等均为私有化设置。此时找到chrome安装源目录,打开chrome.exe,会发现,在私有chrome配置的所有书签,选项等,在这个chrome里都没有。

备注:如果要删掉D:\HaoroomsChromeUserData,一定要先做书签、账号密码等的备份。一经删除,等于是把个人电脑里的私有chrome卸载了,数据都不会保留

二、设置成功以后再打开浏览器,会有提示:

“您使用的是不受支持的命令行标记: --disable-web-security,稳定性和安全性会有所下降”

此时,正常用户都可以进行跨域访问了,比方本地的前端项目,直连测试或者线上环境的接口(前提是目标环境在当前浏览器登陆过,已经存在当前账号的cookies,session等信息)

三、有的用户还是不能访问,此时在console控制台里会看到一段背景是黄颜色的字

'...Specify SameSite=None and Secure if the cookie should be sent in cross-site...'

此时浏览器还是限制了cookies的跨域访问,所以部分人的电脑还是不能使用跨域,

解决方案:

地址栏输入:

chrome://flags

再搜索:

SameSite by default cookies

找到‘SameSite by default cookies’以及‘Cookies without SameSite must be secure’,在后边有个下拉框,这俩选项均选择:‘disabled’,浏览器会提示红字:‘警告:您所要使用的是实验性功能!’

选择忽略警告,此时浏览器是我们本地创建的D:\HaoroomsChromeUserData,点击右下角的Relaunch按钮,浏览器会自动重启,并且保留所有当前已开页面。

备注:联调时使用这个模式,如果访问其它购物等网站,建议还是使用chrome.exe安装源目录的chrome.exe,避免出现不必要的麻烦

其他系统:

mac和linux一样,原来命令行不起作用了,也是指定一个存放数据的文件夹来达到跨域效果。

其他解决方案

可以利用chrome插件的方式实现跨越临时解决方案。

搜索chrome插件

Allow-Control-Allow-Origin: *

安装好插件之后,看他们的文档,设置一下要跨域访问的地址。

到此这篇关于新版chrome浏览器设置允许跨域的实现的文章就介绍到这了,更多相关chrome允许跨域内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

相关文章

  • Chrome的最小字体12px限制最终解决办法

    这篇文章主要介绍了Chrome的最小字体12px限制最终解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一
    2020-10-21
  • css区分ie8/ie9/ie10/ie11 chrome firefox的代码

    这篇文章主要介绍了css区分ie8/ie9/ie10/ie11 chrome firefox的代码,需要的朋友可以参考下
    2020-03-20
  • Chrome 73导致flex布局崩坏的分析与解决方法

    这篇文章主要给大家介绍了关于因Chrome 73导致flex布局崩坏的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面
    2019-04-09
  • 让 Chrome 崩溃的一行 CSS 代码

    一般的 CSS 代码只会出现 UI 版式或者兼容性方面的小问题。但这里我们要分享一行有趣的 CSS,它可以直接让你的 Chrome 页面挂掉,具体内容详情大家跟随小编一起看看吧
    2018-10-11
  • chrome开发者工具-timeline的详细介绍

    这篇文章主要给大家介绍了chrome开发者工具-timeline的相关资料,文中介绍的非常详细,对大家的学习或者工作具有一定的参考价值,需要的朋友们下面来一起学习学习吧。
    2017-04-27
  • 解决chrome浏览器中input背景透明问题

    本文给大家分享的是chrome浏览器中hack解决input:-webkit-autofill自定义样式的方法,就是如何在chrome浏览器中将input的背景设置成透明,方法非常简单,这里推荐给大家。
    2015-03-18
  • Chrome浏览器的自动保存密码提示功能禁用方法

    在表单中加入autocomplete="off"后,IE和FF不会提示保存密码,但是用Chrome浏览器登录系统时,会弹出自动保存密码的提示,从安全的角度考虑,需要禁止浏览器的这个功能
    2014-09-04
  • Google Chrome浏览器无法显示hover样式的解决方法

    鼠标移上去导航背景变别的颜色,可是在Google Chrome浏览器中,把鼠标移到导航上不显示效果,背景无变化,下面是比较不错的解决方法
    2014-09-04
  • 为ie和chrome单独设置样式的方法

    如何单独为ie和chrome设置样式,做浏览器兼容的朋友一定要知道的,下面是将经验与大家分享下
    2014-09-01
  • css的pointer鼠标类型详解(支持IE,firefox,chrome)

    我们在DIV CSS布局时候,我们会遇到对对象内鼠标指针光标进行控制,比如鼠标经过指针变为手指形状等样式,接下来我们介绍鼠标指针样式cursor控制
    2014-06-10

最新评论