介绍一个能避免 CORS 错误的 Chrome 扩展 - Moesif Origin & CORS Changer

简介: 介绍一个能避免 CORS 错误的 Chrome 扩展 - Moesif Origin & CORS Changer

在前端开发人员做开发时,当进入到和后台 API 联调阶段时,不可避免会遇到 CORS 错误。


image.png


本文介绍一个 Chrome 扩展,可以用来在开发阶段避免 CORS 问题。

注意,这个扩展不能用于生产用途,以免引起 security issue.


Chrome 扩展地址:


https://chrome.google.com/webstore/detail/moesif-origin-cors-change/digfbfaphojjndkpccljibejjbppifbc?hl=en-US


image.png


我写了一段简单的 AJAX JavaScript 调用,来产生 CORS 错误:

image.png

本地用 Chrome 打开该网页,会遇到预料中的 CORS 错误:


Access to XMLHttpRequest at ‘http://localhost:3002/’ from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

image.pngimage.png





安装完扩展之后,在设置页面里,将 Access-Control-Allow-Origin 设置为 * 即可:




浏览器工具栏上,看到 on 的图标,刷新网页,AJAX 调用就能正常执行了:


相关文章
Hertz中的CORS问题。
字节跳动开源框架Hertz,可能存在的CORS的跨域问题
|
2月前
谷歌浏览器跨域设置都是127.0.0.1出现跨域
谷歌浏览器跨域设置都是127.0.0.1出现跨域
39 0
|
2月前
|
JavaScript 安全 前端开发
js开发:请解释什么是跨域请求(CORS),以及如何解决跨域问题。
CORS是一种W3C标准,用于解决浏览器同源策略导致的跨域数据访问限制。它通过服务器在HTTP响应头添加标志允许特定源进行跨域请求。简单请求无需预检,而预检请求(OPTIONS)用于询问服务器是否接受非简单请求。服务器端配置响应头如`Access-Control-Allow-Origin`等实现CORS策略,客户端JavaScript则正常发起请求。若配置不当,浏览器将阻止跨域访问,保障安全。
24 2
|
9月前
|
安全 JavaScript 前端开发
配置CORS跨域
出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。
314 0
|
12月前
|
移动开发 前端开发 JavaScript
跨域解决方案CORS
跨域解决方案CORS
135 0
|
缓存 安全 搜索推荐
Cors跨域(三):Access-Control-Allow-Origin多域名?
Cors跨域(三):Access-Control-Allow-Origin多域名?
Cors跨域(三):Access-Control-Allow-Origin多域名?
|
XML JSON 缓存
cors跨域
cors跨域
217 0
|
缓存 开发者
FastAPI(39)- 使用 CORS 解决跨域问题
FastAPI(39)- 使用 CORS 解决跨域问题
921 0
FastAPI(39)- 使用 CORS 解决跨域问题
|
Web App开发 缓存 前端开发
总结-使用CORS解决跨域问题(下)
对前端来说跨域应该是不陌生的,解决跨域的方案有很多种。而我司前端接口调用也正是CORS的方式,所以难免在联调阶段会遇见一些CORS跨域的问题,下面通过一个简单的demo验证一下CORS解决跨域的过程中,对一些不清楚的知识点做一个简单的总结
|
前端开发
总结-使用CORS解决跨域问题(上)
对前端来说跨域应该是不陌生的,解决跨域的方案有很多种。而我司前端接口调用也正是CORS的方式,所以难免在联调阶段会遇见一些CORS跨域的问题,下面通过一个简单的demo验证一下CORS解决跨域的过程中,对一些不清楚的知识点做一个简单的总结