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

前言:

本文主要介绍设置chrome浏览器允许跨域的实现方法,主要是为了解决前后端联调时的一些跨域问题。

通常情况下,前后端分离项目,本地调试代码的时候,经常会遇到跨域问题。在实际工作中其实还是比较实用的,而且实现步骤非常简单。

一、需求背景

我们前端在做项目开发时,需要在本地启动服务,通过浏览器访问页面进行接口联调。但是会遇到跨域问题,可以通过修改代码设置跨域,也可以通过在Chrome设置跨域的方式来解决。

对于跨域问题来说,一般都是由后端解决,如果放在前端的话,目前的解决方式,主要是通过webpack的devServer来配置。

但是有时候开发环境中没有配置devServer,或者项目初期,后端还没有设置跨域,而我们前端也不想干等着浪费开发时间,应该如何处理呢?

二、实现方案

备注:此处先以Mac电脑为例,后面会将Windows电脑的实现方案附上。

  1. 在本地新建一个文件夹:MyChromeDevUserData (文件名可自定义,此处以我的为例)
  1. 把刚才建好的文件夹拖到终端,得到该文件夹的地址路径:
  1. 打开终端输入以下命令:
css 复制代码
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security  --user-data-dir=/Users/xxx/myProject/MyChromeDevUserData

注:根据每个人的电脑不同,命令中需要改的是--user-data-dir后面的路径 (替换为自己的目录路径即可,即第2步中获取到的文件夹的地址路径)。

  1. 回车执行这段代码,就会打开一个新的谷歌浏览器,即出现下图所示页面:

如果是第一次打开,需要重新登录账号,其实就相当于重新打开了一个没有关系的浏览器。

  1. 浏览器出现上面那句话就大功告成了!最后将刚刚跨域的页面地址拷贝到该浏览器即可。

注意事项:

  • 只有通过该命令打开的Google浏览器,才能解决跨域问题;
  • 关闭这个窗口后,需要再次启动该命令,才可以进行跨域访问。

最后附上Windows电脑设置Chrome浏览器跨越设置的实现方案: windows设置方法参考方案

以上,希望对大家有帮助!

相关推荐
崔庆才丨静觅6 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60617 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了7 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅7 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅8 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅8 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment8 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅8 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊8 小时前
jwt介绍
前端
爱敲代码的小鱼8 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax