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

最新推荐文章于 2024-11-11 23:28:15 发布
原创 最新推荐文章于 2024-11-11 23:28:15 发布 · 1.7k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#浏览器跨域解决方案 #LiveServerProxy #纯静态页面跨域处理

本文介绍了在前端开发中遇到跨域问题时，如何利用VSCode的LiveServer插件进行代理配置来规避浏览器的跨域限制。通过设置Host、端口和代理规则，可以在本地实现接口请求的转发，从而顺利进行开发工作。

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

出现 has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present on the 解决方法
码农研究僧的博客
06-03 1万+
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.
live-server 配置 proxy 小白踩坑总结
John_Cooper的博客
12-20 7995
项目开发中想使用live-server配置个代理服务免去在本地搭建后台环境，在网上找了很多live-server的文章看过后一直没有配置成功，后来终于找到了问题的根源，以下是配置截图： package.json 项目script 这里配置proxy一定要注意，网上多数文档都没写到 ...
head各标签及其属性整理
wzp20092009的博客
07-29 1893
1> meta标签 meta 标签提供HTML文档的 元数据(meta-information)，用来表示那些不能由其它HTML相关元素(<base>，<link>， <script>，<style>或者<title>)之一表示的任何元数据信息，放置在文档头部 <head> 中，不会显示在客户端，但会被浏览器解析，我们...
【技术工具】用VsCode扩展插件Live Server设置服务端代理不用Nginx做服务端代理也能解决跨域问题
讯开技术孵化器博客
03-26 3821
跨域问题 也就是俗称的前端与后端交互需要同源策略，即如下： 域：服务器域名，唯一标识(协议，域名，端口)必须保证一致，说明域相同 跨域：在一个服务器上，去访问另一个服务器上，并且得到另一个服务器返回回来的值，这就是javascript跨域，其实简单点，之前我们做的ajax，都是在同域中访问，现在只是访问的服务器变成了另外的，不是同一台了。仅此而已。但是这样一变，之前的代码就不能用了。 解决跨域有几种方式，其中之一就是搭建代理服务器（nginx），让所访问域名、端口、路径相同。但我这里不想用nginx
Live Server 跨域 问题
最新发布
m0_57736251的博客
11-11 502
设置代理一次性解决Live Server 跨域 问题
静态文件访问不到报No Access-Control-Allow-Origin处理办法
06-11
当一个网页尝试从不同的源（协议、域名或端口）请求资源时，如果目标服务器没有允许这个源的权限，浏览器会阻止该请求，从而出现"No 'Access-Control-Allow-Origin' header is present on the requested resource"的...
已解决：No 'Access-Control-Allow-Origin'跨域问题
08-19
总的来说，解决"No 'Access-Control-Allow-Origin'"跨域问题的关键在于理解浏览器的同源策略，并在后端服务器中正确配置CORS策略。在实际开发中，应当兼顾安全性和便利性，根据项目需求来设定合适的跨域策略。
Nginx跨域设置Access-Control-Allow-Origin无效的解决办法
09-30
然而，有时在Nginx服务器上设置`Access-Control-Allow-Origin`后，依然会出现跨域请求失败的情况。本文将探讨这个问题，并提供一种有效的解决方案。 首先，我们需要了解`Access-Control-Allow-Origin`这个HTTP响应...
Nginx配置跨域请求Access-Control-Allow-Origin * 详解
09-09
Nginx配置跨域请求Access-Control-Allow-Origin * 是解决现代Web应用中常见问题的一个关键步骤。在Web开发中，由于浏览器的同源策略限制，不同源的网站之间不能直接进行AJAX请求，除非服务器允许这样的跨域行为。...
live-server本地起node服务解决跨域问题
weixin_53474595的博客
07-28 1523
在根文件夹新建一个build.js文件（名字可以自定义)此时会在根目录下生成一个package.json文件。执行dev就相当于执行了build.js文件。NPM 全局安装live-server。
跨域问题以及使用vscode的LiveServer插件跨域访问
qq_23204557的博客
11-07 2611
跨域问题（Cross-Origin Resource Sharing，CORS）是指在Web开发中，当一个网页尝试访问另一个与其不同源（即域名、协议或端口号不同）的资源时，浏览器出于安全考虑，会限制这种跨源HTTP请求。跨域问题本质上是由于浏览器的同源策略（Same-Origin Policy）所导致的。同源策略是一种浏览器安全机制，它限制了从一个源加载的文档或脚本与另一个源的资源进行交互。
前端开发项目中的跨域访问 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文件中...
解决前端跨域问题 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource
qq_42360077的博客
11-06 808
解决前端跨域问题has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 解决核心代码： import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.sprin
前端开发中解决No Access-Control-Allow-Origin header localhost:63342 is not allowed access跨域问题
u013905744的专栏
09-22 2万+
nginx是反向代理服务器，正向代理服务器与反向代理服务器的区别不赘述，有很多好的图片一看便知。 在前端开发时会遇到前端和后台服务器在不同IP上的情况，这是如果直接ajax 远程后台服务器，会报错 Failed to loadhttp://10.100.122.138:8081/qrapp-service/bus/getStationByLine?busLine=1 : No 'Access...
解决前后端跨域报错：has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘
热门推荐
wsaicyj的博客
11-11 2万+
来自一个IP端口的页面（前端项目），要访问另一个IP端口的资源（springboot请求接口），会产生跨域访问。
使用vscode中的LiveServer插件实现跨域访问
李瑞清的博客
07-27 2233
只需要找到插件配置文件配置代理即可，如下图。
vscode解决本地浏览器运行项目时的跨域问题-Live server
weixin_46447549的博客
07-05 2913
VSCode我的神！
前端使用live-server跨域请求数据
各种吃土豆的博客
03-20 6285
前端的同学应该知道，vue-cli 和 create-react-app 脚手架都提供了跨域问题的解决办法。 vue-cli vue-cli是在vue.config.js修改devServer.proxy //vue.config.js //当前域 http://localhost:8080 //跨域请求接口 http://10.130.100.102:9000/user/info dev...
原生js中使用live server进行跨域访问
weixin_44877713的博客
08-19 1040
1.全局安装live-server npm install live-server -g 2.初始化项目 npm init 3.在package.json中配置npm运行命令 “scripts”: { “start”: “live-server --open=./html/index.html --port=8088 –proxy=/proxy:http://10.130.100.102:9000” } 4.npm start启动服务 5.发出请求 注意：proxy和第三部的proxy必须得相同 axios
实现Ajax跨域访问的简单方法：设置Access-Control-Allow-Origin
### AJAX 设置Access-Control-Allow-Origin实现跨域访问的知识点 #### 跨域问题的由来与影响 在Web开发中，浏览器同源策略限制了一个源（协议、域名、端口）下的网页能够读取另一个源的资源。当通过AJAX请求与当前...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值