How to enable HTTPS for local development in macOS using Chrome

HTTPS, macOS, Chrome

local HTTPS

https://www.cnblogs.com/xgqfrms/p/13582130.html

localhost & HTTPS

  1. 隐藏警告

  1. 修改证书

拖拽 icon

localhost.cer

Quit keychains, 刷新 Chrome

生成证书

key , cert 有效期

keytmp.pem

cert.pem

key.pem

$ openssl req -x509 -newkey rsa:2048 -keyout keytmp.pem -out cert.pem -days 365
# 123456 $ openssl rsa -in keytmp.pem -out key.pem

React 17 & SSR

{
"start": "HTTPS=true react-scripts start"
}
{
"start": "export HTTPS=true && SSL_CRT_FILE=cert.pem && SSL_KEY_FILE=key.pem react-scripts start",
}

demo

https://github.com/xgqfrms/react-in-depth/tree/master/https-app

key & cert

https://github.com/xgqfrms/react-in-depth/blob/master/https-app/cert.pem

https://github.com/xgqfrms/react-in-depth/blob/master/https-app/key.pem

https://github.com/xgqfrms/react-in-depth/blob/master/https-app/package.json


{
"name": "https-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-scripts": "3.4.3"
},
"scripts": {
"dev": "react-scripts start",
"start": "export HTTPS=true && SSL_CRT_FILE=cert.pem && SSL_KEY_FILE=key.pem react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

refs

https://flaviocopes.com/react-how-to-configure-https-localhost/

https://flaviocopes.com/macos-install-ssl-local/

https://www.freecodecamp.org/news/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec/

https://medium.com/@jonsamp/how-to-set-up-https-on-localhost-for-macos-b597bcf935ee

https://dev.to/tability/local-development-with-https-on-osx-1jpb

https://stackoverflow.com/questions/59080466/how-do-i-fix-my-ssl-configuration-for-local-development-with-apache



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


How to enable HTTPS for local development in macOS using Chrome的更多相关文章

  1. Enable HTTPS in Spring Boot

    Spring-boot-enable-ssl Enable HTTPS in Spring Boot APRIL 14, 2015DRISS AMRI This weekend I answered ...

  2. How do I copy SQL Azure database to my local development server?(如何将Azure 中的数据库备份到本地)

    Now you can use the SQL Server Managerment Studio to do this: Connect to the SQL Azure database. 通过 ...

  3. HTTPS页面使用CNZZ统计代码,Chrome显示警告怎么办?

    很多站长会遇到一个问题,网站加入CNZZ的JS统计代码后,Chrome浏览器出现警告:阻止跨站解析器阻断脚本通过document.write调用(A parser-blocking, cross si ...

  4. macOS下Chrome和Safari导入证实抓包HTTPS

    目录 下载证书 mac OS导入证书 Chrome设置代理 Safari设置代理 下面的操作基于Mac OS Catalina(v10.15.3),抓包拦截工具基于Burp Suite v2.1.05 ...

  5. browser-sync & http server

    browser-sync & http server browser-sync https://www.browsersync.io/ usage # step 1 $ npm install ...

  6. 接口测试之——Charles抓包及常见问题解决(转载自https://www.jianshu.com/p/831c0114179f)

    简介 Charles其实是一款代理服务器,通过成为电脑或者浏览器的代理,然后截取请求和请求结果达到分析抓包的目的.该软件是用Java写的,能够在Windows,Mac,Linux上使用,安装Charl ...

  7. Implementing HTTPS Everywhere in ASP.Net MVC application.

    Implementing HTTPS Everywhere in ASP.Net MVC application. HTTPS everywhere is a common theme of the ...

  8. TroubleShoot: Enable Developer Mode in Windows 10 Insider Preview Build 10074

    There is a known issue in Windows 10 Insider Preview build 10074 (see here). Developers cannot enabl ...

  9. 5分钟上手:本地开发环境启动HTTPS

    今天我们访问的所有网站几乎都是受HTTPS保护的.如果你的站点还没有,那你应该使用它.使用HTTPS保护服务器也意味着你不能从不是HTTPS服务器向此服务器发送请求.这给使用本地开发环境的开发人员带来 ...

随机推荐

  1. LoadRunner监控Centos和Ubuntu资源之服务器配置

    Centos 我用的版本是Centos6.8   首先更新源以及基础操作我就不说了,直接上步骤: Step 1 安装相关程序 执行命令:yum install inetd,这一步是为了安装rstatd ...

  2. 网络Devops探索与实践 流程管理分析师

    https://mp.weixin.qq.com/s/OKLiDi78uB8ZkPG2kUVxvA 网络Devops探索与实践 王镇 鹅厂网事 2020-09-23  9月16日举办的2020 ODC ...

  3. Connection Pool

    MySQL :: MySQL Connector/NET Developer Guide :: 4.3 Managing a Connection Pool in Connector/NET http ...

  4. 扩展欧几里得(exgcd)及其应用

    定义 扩展欧几里得算法是用来在已知一组 \((a,b)\) 的时,求解一组 \((x,y)\) 使得 \[ax+by=gcd(a,b) \] 思想 and 板子 根据相关的知识可以得到 \[gcd(a ...

  5. loj10003加工生产调度

    题目描述 某工厂收到了 n个产品的订单,这  个产品分别在 A.B 两个车间加工,并且必须先在 A 车间加工后才可以到 B 车间加工. 某个产品 i 在 A,B 两车间加工的时间分别为 A_i,B_i ...

  6. 在plsql/developer的命令窗口执行sql脚本

    在plsql/developer的命令窗口执行sql脚本的命令是@+路径. 命令窗口,如下: 1.在指定位置创建.sql文件 2-1.输入@,点击回车,选择.sql文件 2-2.或者@加路径

  7. 最简单直接地理解Java软件设计原则之依赖倒置原则

    理论性知识 定义 依赖倒置原则,Dependence Inversion Principle (DIP) 高层模块不应该依赖低层模块.二者都应该依赖其抽象. 抽象不应该依赖细节,细节应该依赖抽象. 针 ...

  8. Django(多表查询操作)

    首先了解一下 mysql中的表之间的关系,一对一,一对多,多对一,多对多. 一对多关系.多对一关系.一对一关系 至少都有一侧是单个实体,所以记录之间的联系通过外键实现,让外键指向这个实体. 实现这种关 ...

  9. 深信服edr控制中心漏洞——验证码逻辑错误

    验证码逻辑错误 文件:tool/log/l.php的第93行

  10. FortiGate防火墙办公网常用配置

    1.建立主备机 2.配置端口 3.配置SD-WAN 4.新建上网路由 5.新建上网策略 6.建立与其他点的IPSec VPN或点对点专线