使用http-server解决跨域问题

最新推荐文章于 2024-03-10 15:41:33 发布
最新推荐文章于 2024-03-10 15:41:33 发布
阅读量2.4k 收藏
点赞数 1
文章标签： node.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45029879/article/details/108296329
版权

使用http-server解决跨域问题

用http-server解决过跨域的问题，现在来总结一下。
由于前段时间，公司突然要求开发一个h5的可视化页面，但是这个页面是模板文件，最后要放在服务器端，前端就是个html页面，所以就用的http-server来解决跨域，调试接口

  1. 安装http-server
    使用win +r 打开dos面板，全局安装 npm install -g http-server

  2. 启用http-server
    http-server
    在这里插入图片描述

  3. 使用http-server启动我们的项目
    http-server 项目路径
    这时候我们发现可以访问静态页面但是接口请求依然报404

  4. 使用 -P 访问我们的接口地址
    http-server 项目路径 -P 服务器地址
    以上就是我对http-server的使用总结，如更刚兴趣的可访问https://www.npmjs.com/package/http-server，进行深入研究

weixin_45029879
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解webpack-dev-server使用http-proxy解决跨域问题
08-28
主要介绍了详解webpack-dev-server使用http-proxy解决跨域问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
http-server实现跨域
TinaSlowDown的博客
03-13 1415
跨域处理方法
HTTP----跨域解决方式
最新发布
m0_58794378的博客
03-10 1815
在说跨域之前，需要先了解一下什么是同源策略，跨域就是因为浏览器这个安全策略引起的。
UE4 HTTPServer 跨域问题1
DuGuYiZhao的博客
06-16 986
UE4 HTTPServer 通配符引起的跨域问题简单处理
CORS(跨域资源共享)理论篇
明月阁
12-01 305
原文链接：http://www.dubby.cn/detail.html?id=9065 CORS:Cross-Origin Resource Sharing (跨域资源共享) HTTP 响应首部字段Access-Control-Allow-Origin响应首部中可以携带一个 Access-Control-Allow-Origin 字段，其语法如下:Access-Control-Allow-Or
前端跨域请求终极解决方案 http-server 超轻量级web服务器 http-proxy-middleware 将接口代理到本地
逆水行舟，不进则退
04-17 1万+
http-server 超轻量级web服务器 目前大多数开发都是前后端分离，后台写好api，前台通过api拿到数据然后渲染，但是由于浏览器的同源策略，不允许跨域访问数据，前台测试会比较麻烦，无法拿到数据，正式的部署不会有这个问题。 前端分离开发经常会遇到这样的场景： 前端妹纸：怎么数据又获取不到了，后台设置一下跨域 有的时候做前端，想要运行一些代码，但是又没有必要使用tomcat或...
命令行服务器（http-server)和跨域
weixin_43310551的博客
01-11 1万+
http-serevr是一个简单的命令行http服务器，基于nodejs。下面介绍怎么安装使用http-server（需要node环境，没有环境的请先安装好nodejs）。http-server官方地址:https://www.npmjs.com/package/http-server 。 1、安装（全局安装加 -g） 全局安装：npm install http-server -g 2、使用(以w...
前端npm 安装http-server允许跨域启动 命令行参数
sevendemage的博客
09-13 511
前端npm 安装http-server允许跨域启动 命令行参数
http-server使用，启动本地服务器 & 使用serve包本地启动
weixin_44867717的博客
10-18 1万+
node,http-server,serve
Golang http server 跨域问题与解决办法
togolife的博客
12-16 4235
跨域，简称CROS，Cross-origin resource sharing。这里不仅仅是golang开发http server时会遇到的问题，它不区分语言，只要是http server都可能遇到这个问题。 本文介绍跨域的通用解决办法。 一个简单的golang http server 使用golang开发一个简单的http server程序，程序应答hello, world。如下逻辑所示： package main import "net/http" func HandlerHttp(w http.
使用webpack-dev-server处理跨域请求的方法
12-11
在前端调试的时候，跨域一直都是一个比较麻烦的问题，这个在之前的文章 关于跨域问题的一个解决方法 中其实已经讨论了一些可以使用的方法。 如果要使用 JSONP，第一是需要修改的地方比较多，而且也不太符合前端发展...
解决arcgis server跨域问题
07-22
解决arcgis server跨域问题： 1、停掉ArcGIS Server的服务。 2、 打开<ArcGIS Server> \framework\runtime\tomcat\conf\web.xml,注册跨域bean 3、lib下拷贝 cors-filter-2.5.jar java-property-utils-1.9.1.jar包 4...
python web.py开发httpserver解决跨域问题实例解析
09-20
主要介绍了python web.py开发httpserver解决跨域问题实例解析，分享了相关代码示例，小编觉得还是挺不错的，具有一定借鉴价值，需要的朋友可以参考下
微服务跨域配置
热门推荐
WEN38306482的博客
10-27 22万+
微服务跨域配置
前端常见跨域解决方案
qq_42819474的博客
09-28 189
前端常见跨域解决方案什么是跨域？同源策略限制以下几种行为：常见跨域场景跨域解决方案一、 通过jsonp跨域二、 document.domain + iframe跨域三、 location.hash + iframe跨域四、 window.name + iframe跨域五、 postMessage跨域六、动态创建script七、 跨域资源共享（CORS）七、 nginx代理跨域九、 WebSocket协议跨域 什么是跨域？ 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。 广义的跨域
http-server服务跨域设置
weixin_30295091的博客
09-15 2960
http-server --cors -p 9999--------------------------------------------------------------------------------------------------------------------------------------------------------------------Available ...
跨域解决方法
天天写代码
08-12 137
jsonp是解决跨域的方法之一 其本质是 script标签发送请求， 原理： jsonp的实现是通过动态添加script标签从而发送http请求实现 准备一个静态页面 在3000端口提供http server并托管静态资源 如果没有下载插件就没有提示 插件名字： live server 效果如下 如果访问一个路由呢？ 需要在服务端返回相应的数据，在浏览端获取并操作 将json数据包装起来并返回的一种方式 ----- 协议 在使用jsonp实现跨域的时候，它是需要将jso
c++ websocket客户端_tcp协议;websocket协议;同源策略和跨域
weixin_39668496的博客
11-25 585
tcp协议为什么连接的时候是三次握手，关闭的时候却是四次握手？答：因为当Server端收到Client端的SYN连接请求报文后，可以直接发送SYN+ACK报文。其中ACK报文是用来应答的，SYN报文是用来同步的。但是关闭连接时，当Server端收到FIN报文时，很可能并不会立即关闭SOCKET，所以只能先回复一个ACK报文，告诉Client端，"你发的FIN报文我收到了"。只有等到我Se...
vue-pdf解决跨域问题
07-16
### 回答1： 要解决vue-pdf的跨域问题，可以采取以下几种方法： 1. 使用代理服务器：可以在vue.config.js中配置代理服务器，将跨域请求发送到代理服务器上，再由代理服务器去请求pdf文件。这样可以避免直接在前端发起跨域请求，从而解决跨域问题。 2. 设置响应头：在后端服务器中设置Access-Control-Allow-Origin头，允许前端的请求跨域访问。可以设置"*"表示允许所有域名的跨域请求，也可以指定具体的域名。 3. 使用后端接口：将pdf文件存储在后端服务器上，然后通过后端接口去请求pdf文件并返回给前端。这样可以避免直接在前端发起跨域请求。 4. JSONP方式请求：如果后端支持JSONP方式，可以在前端使用JSONP方式去请求pdf文件。JSONP通过动态创建<script>标签实现跨域请求，并且服务器返回的是一段可执行的JavaScript代码。 以上是几种常用的解决vue-pdf跨域问题的方法，具体选择哪种方法取决于项目需求和后端支持情况。 ### 回答2： Vue-pdf是一个用于在Vue项目中显示PDF的插件。在某些情况下，可能会遇到跨域问题，即无法加载外部PDF文件。以下是解决跨域问题的方法： 1. 在Vue项目的配置文件vue.config.js中添加webpack配置。找到configureWebpack选项，添加以下代码： ``` module.exports = { configureWebpack: { devServer: { headers: { "Access-Control-Allow-Origin": "*" } } } } ``` 这将设置允许所有域名访问该服务。请注意，这样做可能会在生产环境中引起安全风险，仅在开发环境中使用。 2. 使用一个代理服务器来代理PDF文件的请求。在vue.config.js中添加以下代码： ``` module.exports = { devServer: { proxy: { '/api': { target: 'http://example.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` 这将把以/api开头的请求转发到http://example.com上。确保将http://example.com替换为实际的PDF文件所在的服务器地址。 3. 将PDF文件转换为base64编码格式，然后通过URL.createObjectURL方法将其作为Blob对象传递给vue-pdf。可以使用axios或其他网络请求库来获取PDF文件，并使用FileReader将其转换为base64编码。 以上方法中的任何一种都可以解决跨域问题，需要根据具体情况选择适合的方法。 ### 回答3： 要解决Vue-PDF的跨域问题，可以通过设置服务器代理、使用nginx来解决。下面将详细介绍两种方法： 1. 设置服务器代理： 如果Vue项目是使用vue-cli创建的，并且项目使用的是webpack-dev-server作为开发服务器，可以在项目的根目录下创建vue.config.js文件，并在其中添加以下内容： ```javascript module.exports = { devServer: { proxy: { '/api': { // 将/api替换为实际的API请求前缀 target: 'http://example.com', // 设置实际接口的域名 changeOrigin: true, // 允许跨域 secure: false // 关闭SSL验证 } } } } ``` 其中，`/api`是你实际的API请求前缀，`http://example.com`是实际接口的域名。这样，当你在Vue组件中发起API请求时，会自动将请求代理到指定的域名，解决了跨域问题。 2. 使用nginx： 如果项目部署在nginx服务器上，可以通过配置nginx来解决跨域问题。首先，打开nginx的配置文件，在`http`块中添加以下内容： ```nginx location /api/ { rewrite ^.+api/?(.*)$ /$1 break; proxy_pass http://example.com/; // 将example.com替换为实际的接口域名 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } ``` 在上述配置中，`/api/`是你实际的API请求前缀，`http://example.com/`是实际接口的域名。这样，当你在Vue组件中发起API请求时，nginx会将请求代理到指定的域名，解决跨域问题。 无论是使用服务器代理还是nginx，都可以解决Vue-PDF的跨域问题。根据具体情况选择适合自己项目的方法即可。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值