VSCode自定义代码片段3——url大全

url大全

{
	// url'
	// 3  如何自定义用户代码片段:VSCode =》左下角设置 =》用户代码片段 =》新建全局代码片段文件... =》自定义片段名称 =》编辑用户片段 =》ctrl+S 保存
	// url大全
	"Print to console": {
		"prefix": "url'",
		"body": [
			" # url大全",
			" ## HTML5 结构",
			"   -  ",
			" ## CSS3 样式",
			"   - CSS3/ 弹性布局fle ————\"https://blog.youkuaiyun.com/Java_53/article/details/117635233\"",
			" ## JavaScript 前端核心语言",
			"   -  ",
			" ## ES6 高阶语法",
			"   -  ",
			" ## Vue 前端大框架",
			"   - cli3/package-lock.json文件 ————\"https://github.com/wuying-05/lovelink/blob/master/package-lock.json\"",
			"   - cli3/package.json文件 ————\"https://github.com/wuying-05/lovelink/blob/master/package.json\"",
			"   - cli3/vue.config.js文件 ————\"https://github.com/wuying-05/lovelink/blob/master/vue.config.js\"",
			"   -  ",
			" ## AJAX 前端请求",
			"   -  ",
			" ## Node.js 后端JavaScript运行环境",
			"   -  ",
			" ## Express (http服务框架) 创建服务器",
			"   -  ",
			" ## 其它",
			"   - 前端文档合集————https://blog.youkuaiyun.com/Java_53/article/details/117116390?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164962184116780271587315%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=164962184116780271587315&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-117116390.nonecase&utm_term=总结&spm=1018.2226.3001.4450",
			"   - Vue单词大全————https://blog.youkuaiyun.com/Java_53/article/details/114461107",
		],
		"description": "url大全"
	}
}

@沉木

### 解决 VSCode 中的跨域 CORS 问题 #### 使用全局变量设置基础 URL 为了处理 Vue 项目的开发环境中遇到的跨域问题,可以通过配置 `baseUrl` 来指定 API 请求的基础路径。这有助于简化不同环境下(如本地开发、测试和生产)API 路径的管理。 ```javascript GlobalDatas.baseUrl = '/jkpt'; // 设置为本地服务器地址[^1] ``` 这种方法适用于前端应用与后端服务在同一域名下运行的情况,通过相对路径的方式避免了浏览器的安全策略限制。 #### 修改 AJAX 请求以适应特定环境 当需要向外部资源发起请求时,可以调整 AJAX 的调用方式来绕过跨域限制: ```javascript var VSCODE_CORS_URL = { key: "http://localhost:1337", proxy: "http://www.lofter.com" }; $.ajax({ type: "get", url: `${VSCODE_CORS_URL.key}/trade/reward/isOpen?VSCODE_CORS=${encodeURIComponent(JSON.stringify(VSCODE_CORS_URL))}`, success: function (res) { console.log(res); } }); ``` 此方法利用了一个中间代理服务器作为桥梁,在实际项目中应替换为正式的服务接口[^2]。 #### 利用 LiveServer 插件实现跨域访问 对于静态网页或小型 Web 应用程序来说,安装并启用 Visual Studio Code 上的 **Live Server** 扩展是一个简单有效的解决方案。该扩展能够创建一个实时更新的 HTTP 服务器实例,并允许开发者轻松地进行前后端分离式的开发工作流。 - 安装完成后右键点击 HTML 文件选择“Open with Live Server” - 访问由插件启动的小型 web server 即可正常加载页面而无需担心跨域问题[^3] #### 配置 Chrome 浏览器调试模式下的 CORS 放宽政策 如果是在 VSCode 内部使用内置终端或其他工具链来进行 JavaScript 或者 TypeScript 开发,则可能还需要进一步修改 IDE 和/或浏览器的行为以便更好地支持跨域操作。具体做法如下: - 更改 launch.json 文件中的配置项 `"webBrowser": "chrome"` 并添加参数 `--disable-web-security` - 这样做之后再执行 F5 启动调试就不会因为 CORS 策略被阻止了[^4]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值