No ‘Access-Control-Allow-Origin‘ header前端浏览器跨域用LiveServer处理

最新推荐文章于 2023-07-28 18:33:22 发布
最新推荐文章于 2023-07-28 18:33:22 发布
阅读量1.5k 收藏 5
点赞数 3
分类专栏： 前端接口调试 前端编程工具 文章标签： 浏览器跨域解决方案 LiveServerProxy 纯静态页面跨域处理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wzp20092009/article/details/126869074
版权

1.报错

has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
简而言之，不允许跨域

2. 代理处理

因为是纯前端代码，我们这里使用vscode插件Live Server代理并转发接口请求，从而绕过浏览器跨域问题，安装Live Server请点击这里。

  1. 打开配置Live Server
    在这里插入图片描述

  2. 配置本地服务Host
    默认host是127.0.0.1
    在这里插入图片描述

  3. 配置本地服务端口
    默认端口不改也没问题，如需修改点击【在 settings.json 中编辑】
    在这里插入图片描述
    按照实际需求配置端口号
    在这里插入图片描述

  4. 设置代理，这一步才是代理跨域处理！！！
    跨域enable的要设为true才能使用代理，然后识别需要代理的接口路径，并设置代理的地址。
    在这里插入图片描述
    在settings.json中也能看到配置的端口和代理
    在这里插入图片描述

  5. 起本地服务，只要你路径设置正确了就可以代理解决浏览器跨域问题了
    在这里插入图片描述

梓喻
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
出现 has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present on the 解决方法
码农研究僧的博客
06-03 2620
Access to XMLHttpRequest at 'http://127.0.0.1:5000/api/data' from origin 'http://10.197.0.79:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
宝塔部署项目遇到“Access-Control-Allow-Origin”跨域问题，通过调整nginx的时候需要注意，不是在nginx配置文件，是在网站管理里面进行配置
最新发布
feixuewisdomlee的博客
05-05 689
uniapp项目遇到跨域问题的解决方法
head各标签及其属性整理
wzp20092009的博客
07-29 1509
1> meta标签 meta 标签提供HTML文档的 元数据(meta-information)，用来表示那些不能由其它HTML相关元素(<base>，<link>， <script>，<style>或者<title>)之一表示的任何元数据信息，放置在文档头部 <head> 中，不会显示在客户端，但会被浏览器解析，我们...
live-server本地起node服务解决跨域问题
weixin_53474595的博客
07-28 1147
在根文件夹新建一个build.js文件（名字可以自定义)此时会在根目录下生成一个package.json文件。执行dev就相当于执行了build.js文件。NPM 全局安装live-server。
VS Code -- Live Server
2301_76778596的博客
03-16 3249
Live Server插件用来自动加载热部署前端页面相关的文件（.html/.js/.ts/.css），简单来说就是：快速启动本地服务，自动监听，不需要刷新就能更新内容。有了它之后调试前端页面再也不需要不停地手工去点击浏览器上的刷新按钮。
解决前后端跨域报错：has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘
wsaicyj的博客
11-11 2万+
来自一个IP端口的页面（前端项目），要访问另一个IP端口的资源（springboot请求接口），会产生跨域访问。
vue 如何引入动态本地json
IT_iosers的博客
12-21 2240
思路：通过require 结合模板字符串实现动态引入本地json js代码： let num = 141000; let linFen = require(`../../public/city-provinces/city-provinces/citys/${num}.json`)
Nginx配置跨域请求Access-Control-Allow-Origin * 详解
09-09
Nginx配置跨域请求Access-Control-Allow-Origin * 是解决现代Web应用中常见问题的一个关键步骤。在Web开发中，由于浏览器的同源策略限制，不同源的网站之间不能直接进行AJAX请求，除非服务器允许这样的跨域行为。...
静态文件访问不到报No Access-Control-Allow-Origin处理办法
06-11
当一个网页尝试从不同的源（协议、域名或端口）请求资源时，如果目标服务器没有允许这个源的权限，浏览器会阻止该请求，从而出现"No 'Access-Control-Allow-Origin' header is present on the requested resource"的...
Nginx跨域设置Access-Control-Allow-Origin无效的解决办法
01-10
add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET,POST'; 使用以下配置，生效。 if ($request_method = '...
SpringBoot跨域Access-Control-Allow-Origin实现解析
08-25
SpringBoot 跨域 Access-Control-Allow-Origin 实现解析 SpringBoot 跨域 Access-Control-Allow-Origin 实现解析是指在 SpringBoot 框架中解决跨域问题的方法。跨域是指不同域名之间相互访问，浏览器不能执行其他...
已解决：No 'Access-Control-Allow-Origin'跨域问题
08-19
总的来说，解决"No 'Access-Control-Allow-Origin'"跨域问题的关键在于理解浏览器的同源策略，并在后端服务器中正确配置CORS策略。在实际开发中，应当兼顾安全性和便利性，根据项目需求来设定合适的跨域策略。
解决前端跨域：has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header...
qq_43055855的博客
12-25 4862
在前端工作中，有时候会碰到跨域的问题，就是请求的接口地址和本身的服务器不属于一个域内，此时浏览器会报错： XXXXX（请求的跨域url）has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested 网上有很多的解决办法，可以用jsonp来请求等等。 这里...
解决前端跨域：has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header...
热门推荐
qq_40088443的博客
09-16 42万+
在前端工作中，有时候会碰到跨域的问题，就是请求的接口地址和本身的服务器不属于一个域内，此时浏览器会报错： XXXXX（请求的跨域url）has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested 网上有很多的解决办法，可以用jsonp来请求等等。 这里...
vscode配置live-server转发代理
怪只怪满眼尽是人间烟火
06-21 2831
首先安装live-server， 然后点击设置：
【逐点突破系列】 深入跨域
qd520_1314的博客
04-25 2932
fetch(‘https://photo.sina.cn/aj/index?page=1&cate=recommend’) .then(data=>{ console.log(data); }) 复制代码 通过 live-server打开浏览器，在控制台可以看到报错了，因为这个是一个跨域的请求： 接下来我们来看看JSONP如何解决这个问题： [](()3.3.2、jsonp 如何使用？原理是什么？返回数据格式？前端怎么处理？ 还是请求上面的这个网站地址，我们把代码改成下面这样：
前端开发项目中的跨域访问 No 'Access-Control-Allow-Origin' header
w1213096890的博客
03-15 1万+
解决方案一：如果后端听你的那就在让他相应流response中添加response.setHeader("Access-Control-Allow-Origin", "*");response.setHeader("Access-Control-Allow-Method", "POST,GET");解决方案二：前端开发使用proxyTable使用代理配置跨域访问在config/index.js文件中...
vscode配置live-server转发代理的过程
sunhcsss的博客
03-24 2264
步骤： 1.在vscode中设置转发的配置 baseUri为代理时的location proxyUri为要请求要代理的地址 2.重启live-server服务器 关闭之后重新打开，html中的跨域请求就可以正常转发了
前后端分离跨域问题：has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ heade
wyx_160724的博客
08-26 3207
Access to XMLHttpRequest at 'http://localhost:82/user/findUserById?id=3' from origin 'http://127.0.0 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 当在进行前后端分离的时候，前端页面请求后台数据的数据，在浏览器出不来数据，且报以下错误
No Access-Control-Allow-Origin header is present on the requested resource.
09-15
No 'Access-Control-Allow-Origin' header is present on the requested resource是一个跨域问题。这个问题通常发生在前端访问后端接口时，由于安全限制，浏览器会阻止跨域请求。要解决这个问题，有几种方法可以尝试。 一种方法是在后端接口或配置文件中添加跨域代码。可以使用以下代码来允许所有来源访问接口： header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET');//允许访问的方式 或者在过滤器中添加以下代码： httpResponse.setHeader("Access-Control-Allow-Origin","*"); httpResponse.setHeader("Access-Control-Allow-Credentials", "true"); httpResponse.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE"); 另一种可能的原因是在配置文件或其他设置中重复配置了跨域。比如在FileUtil中配置了response.addHeader("Access-Control-Allow-Origin", "*")，然后又在CorsFilter中添加了一次配置。这样就会出现两个Access-Control-Allow-Origin问题。在这种情况下，只需要删除其中一个配置即可解决问题。 总结来说，解决"No 'Access-Control-Allow-Origin' header is present on the requested resource"问题的方法是添加跨域代码或删除重复的跨域配置。这样浏览器就能正确处理跨域请求了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值