[html]解决本地需跨域访问问题（无需改代码）

最新推荐文章于 2024-05-05 15:23:37 发布
最新推荐文章于 2024-05-05 15:23:37 发布
阅读量4.8k 收藏 4
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_41770242/article/details/89428763
版权

10秒钟了解跨域原因：

     hbuilder 启项目的话会分配个接口,本地服务端启动也会分个接口,html中访问服务端时就会有跨域问题

解决：

说明：在测试/正式解决此问题的方式是配置nginx 本地也可以使用nginx 但是代价有点高 现提供快速简单的方法

使用http-server 非常好使！

1.进入项目所在路径 

/Users/a1/Documents/HBuilderProjects/demo

2.启动http-server

 http-server . -P http://localhost:8080
3.用提供的端口在浏览器上访问

点击想访问的html或者直接拼到url上就好啦

啊迟
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html跨域访问
kerryqpw的博客
06-04 1372
html跨域访问
javascript跨域方法、原理以及出现问题解决方法（详解）
01-19
javascript跨域访问是web开发者经常遇到的问题，什么是跨域，一个域上加载的脚本获取或操作另一个域上的文档属性，下面将列出三种实现javascript跨域方法: 1.基于iframe实现跨域      基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点，也就是两个页面必须属于一个基础域（例如都是xxx.com，或是xxx.com.cn），使用同一协议（例如都是 http）和同一端口（例如都是80），这样在两个页面中同时添加document.domain，就可以实现父页面调用子页面的函数，代码如下： 页面一： Html代码  <html>
前后端分离遇到CORS问题的解决办法
最新发布
weixin_74923758的博客
05-05 1107
头部（只是其中一个头部）是用来声明哪些源可以访问服务器资源的HTTP响应头部。当服务器收到跨域请求时，需要在响应中包含这个头部，并且指定允许访问资源的来源域名。如果没有正确设置这个头部，那么浏览器会阻止跨域请求，导致出现CORS错误。// 替换为您的前端域名next();});这样子设置可以允许所有来源的跨域请求，并指定允许的请求方法和请求头。但是在实际生产环境中，一定要限制允许的来源，而不是使用通配符 *// 替换为您的前端域名next();});});});
前端实现跨域
low666的博客
04-08 816
前端跨域 跨域：指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。 资源跳转： A链接、重定向、表单提交 资源嵌入： < link>、< script>、 < img>、< frame>等dom标签，还有样式中background:url()、@font-face()等文件外链 脚本请求： js发起的ajax请求、dom和js对象...
在本地打开HTML网页时，可能会出现资源加载跨域的问题
qq_43509445的博客
04-20 2868
在本地打开HTML网页时，可能会出现资源加载跨域的问题
解决跨域的4种方案
m0_61852712的博客
10-14 3757
解决跨域的四种方案
html前端跨域问题的解决方案
weixin_41883890的博客
11-15 5601
来，我们解释一下：首先通过第一个script脚本注册一个函数f，那么这个函数自然就存在了，后面使用的脚本也能用f这个函数，这个道理和你用script引入一个jquery然后后面用 $ 开始一通操作是一样的道理。但是但是前端这个时候注册了一个f函数呀，所以就会执行这个f(‘你好’)，那么前端的数据也就请求回来了。首先是前端：使用ajax发送get请求，请求地址为http://127.0.0.1/api/get，由于前端页面使用file格式打开，所以在请求http协议的本机地址是会产生跨域问题。
jQuery 跨域访问问题解决方法
10-29
跨域访问是Web开发中的一个常见挑战，尤其在JavaScript中，由于同源策略的限制，浏览器不允许脚本从一个域请求另一个域的数据。jQuery提供了一些方法来解决这个问题，主要是通过JSONP（JSON with Padding）机制。 ...
HTML5 本地存储实现购物车功能
09-28
HTML5的本地存储功能在现代Web...总结起来，HTML5的本地存储技术为实现无服务器交互的购物车功能提供了一种高效、便捷的解决方案。虽然存在一些局限性，但在合适的应用场景下，它可以显著提升Web应用的性能和用户体验。
HTML5点击添加商品购物车代码 v1.0
10-06
6. **跨域问题**：由于Web Storage的数据是局限于同源策略的，即只能在相同的协议、域名和端口下访问，所以如果购物车功能需要在多个子域名下共享，可能需要借助其他技术，如CORS（跨源资源共享）来实现。...
dwr跨域访问以及dwr的使用+dwr.jar
01-22
5. **前端调用**：在HTML或JavaScript代码中，引入DWR生成的JavaScript文件，然后就可以像调用本地函数一样调用服务器端的方法。 6. **安全控制**：DWR提供了多种安全机制，如白名单、IP限制、签名认证等，确保只有...
html静态读取excel文件
12-13
首先，HTML5引入了File API，使得用户可以通过浏览器直接操作本地文件，而无需服务器介入。在HTML中，我们可以通过`<input type="file">`创建一个文件选择器，用户可以选择本地的Excel文件。当用户选择文件后，我们...
解决html访问本地数据时出现的跨域问题
qq_41970098的博客
04-07 3212
问题： 由于现在有很多好用的网页可视化工具，经常需要加载本地的数据来进行绘制网页，但是直接使用ajax访问时会提示has been blocked by CORS policy.因此查询可用的方法。 解决办法： 1.使用jsonp解决跨域 （仅适用于GET请求） <script> 标签是不受同源策略的限制的，它可以载入任意地方的 JavaScript 文件，而并不要求同源。 所以 JSONP 的理念就是，我和服务端约定好一个函数名，当我请求文件的时候，服务端返回一段 JavaScript。这段
本地html页面访问出现跨域问题
guodongme123的博客
04-19 5266
关于本地html页面引入js文件后出现跨域访问的问题 本地html页面访问出现跨域问题 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助...
实现跨域的几种方式
qq_49633562的博客
08-01 1708
1、CORS跨域资源共享，在后端的响应头中设置即可。2、jsonpjsonp进行跨域的原理：利用script标签进行网络请求，在本地定义好接收数据的函数，然后通过在请求url中添加参数的方式发送本地函数名，后端通过解析url参数并返回js代码，其中就可包含调用本地函数及传入数据参数的代码。3、nginx服务器代理在nginx服务器的默认配置文件nginx.conf中添加：...
Hbuilder X中html页面访问IDEA后端服务的跨域问题
weixin_44430893的博客
04-10 4225
Hbuilder X与IDEA跨域问题的解决 问题摘要 我用Hbuilder X编写html界面，用IDEA写后端。然后用前者的html页面请求后者的功能，实现项目的前后端分离。但是在实现过程中遇到了跨域问题，特此记录一下关于跨域问题的解决方案。 具体需求 1、在IDEA中，我写了一个方法，就是查询所有订单信息的方法，代码如下所示：（注意加 @ResponseBody ） @RequestMapping(value = "/assign") public class AssignController
终结同源策略！轻松实现跨域访问的9种方式！
你若盛开，清风自来
06-25 1666
同时，我们在nginx配置文件中设置了Access-Control-Allow-Origin头信息，允许跨域访问，从而实现了跨域通信的目的。在这个示例代码中，我们使用了Node.js的Express框架实现了一个简单的API，该API允许跨域访问，通过设置响应头信息，指定了允许跨域请求访问的源、请求头和请求方法。在同一个父域名下的不同子域名之间进行跨域操作时，由于浏览器的同源策略，会限制JS代码的访问权限，为了解决这个问题，可以在父域名相同的情况下，通过设置document.domain来实现跨域访问。
HTML——解决跨域
热门推荐
qq812457115的博客
05-28 1万+
1. 跨域 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的 2. 解决跨域的方式 1.通过jsonp跨域 2.document.domain + iframe跨域 3.location.hash + iframe 4.window.name + iframe跨域 5.postMessage跨域 6.跨域资源共享（CORS） 7.nginx代理跨域 8.nodejs中间件代理跨域 9.WebSocket协议跨域 2.1. 通过jsonp跨域 jsonp缺点：只能实现get一
vue使用rpm run build打包后dist文件夹点击index.html出现跨域问题
weixin_45688580的博客
07-26 1686
vue使用rpm run build打包后dist文件夹点击index.html出现跨域问题
vue cli本地开发跨域问题解决
06-08
Vue CLI本地开发跨域问题可以通过以下几种方式进行解决： 1. 使用代理：在`vue.config.js`中配置`devServer.proxy`，将请求代理到目标服务器，如： ``` module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` 2. 使用webpack-dev-server提供的配置项：在`vue.config.js`中配置`devServer.headers`和`devServer.disableHostCheck`，如： ``` module.exports = { devServer: { headers: { 'Access-Control-Allow-Origin': '*' }, disableHostCheck: true } } ``` 3. 使用Chrome浏览器插件：如`CORS Unblock`或`Allow CORS: Access-Control-Allow-Origin`等插件，可以在本地开发中解决跨域问题。 注意：以上方法只适用于本地开发环境，生产环境需要在服务器端进行跨域处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值