如何解决swagger-editor在线接口调试时的跨域问题

文章目录

  • 一,序言
  • 二,问题重现
    • 1. 运行swagger-editor
    • 2. 运行接口服务
    • 3. 问题重现步骤
  • 三,解决问题思路
    • 1. 去除浏览器安全限制
    • 2. 服务器接口统一处理
    • 3. 委托nginx转发
  • 四,完整接口代码传送

一,序言

在 Docker 运行swagger-editor实现在线接口文档维护与调试 文章中,我们简单了解了如何在docker运行应用,接下来我们实际操作的时候,便可能遇到接口调试不通的问题。

这个问题的根本原因:浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源

下面我们便来重现,解决这个问题。

二,问题重现

1. 运行swagger-editor

请参考 Docker 运行swagger-editor实现在线接口文档维护与调试

2. 运行接口服务

docker-compose.yml

version: '3'
services:docker-demo:image: registry.cn-shanghai.aliyuncs.com/00fly/docker-demo:0.0.1container_name: docker-demodeploy:resources:limits:cpus: '0.80'memory: 300Mreservations:cpus: '0.05'memory: 100Mports:- 80:8080restart: on-failurelogging:driver: json-fileoptions:max-size: 5mmax-file: '1'

运行命令,启动接口服务

docker-compose up -d

3. 问题重现步骤

打开接口文档复制单个接口文档
在这里插入图片描述
将内容粘贴到swagger-editor左边, 依次点击 try it out、Execute
在这里插入图片描述
在这里插入图片描述
发现接口报错,跨域调用被拒绝。

三,解决问题思路

1. 去除浏览器安全限制

客户端行为,不太建议,大家可以自行搜索:浏览器关闭跨域限制、chrome关闭跨域限制

2. 服务器接口统一处理

springmvc或springboot工程,统一在需要允许跨域的类或方法上添加@CrossOrigin注解
在这里插入图片描述
此方法在可以改造接口代码的情况下,建议采用。

3. 委托nginx转发

具体思路就是客户端A需要访问接口C,因跨域无法直接访问

跨域访问失败
客户端A
接口C

现在服务器B安装nginx服务,客户端A直接将请求发送到服务器B某端口,由nginx将请求转发给接口C

客户端A
nginx转发
接口C

C返回结果后,由nginx主动添加header信息,返回A。

具体操作为:在nginx配置文件 nginx.conf 新增一行

 include conf.d/*.conf;

在这里插入图片描述
在conf.d目录(不存在就新建)下新建conf文件,如 00fly.conf内容如下:

server {listen 8081;   proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;location / {  add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';if ($request_method = 'OPTIONS') {return 204;}proxy_read_timeout 1800;proxy_next_upstream http_502 http_504 error timeout invalid_header;proxy_set_header Host $host;proxy_set_header X-Forwarded-For $remote_addr;proxy_pass http://175.24.127.215:8080;}
}

实现监听8081端口,将请求转发到 http://175.24.127.215:8080,重点是标红的这段,实现添加允许跨域信息header
在这里插入图片描述
放出最后访问成功信息
在这里插入图片描述

四,完整接口代码传送

https://gitee.com/00fly/docker-demo


有任何问题和建议,都可以向我提问讨论,大家一起进步,谢谢!

-over-

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/148070.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

持续集成部署-k8s-配置与存储-配置管理:ConfigMap 的热更新

ConfigMap 的热更新 1. 简介2. 新建 Pod3. 使用 edit 命令编辑修改4. 使用 replace 命令替换修改1. 简介 在 Kubernetes 中,ConfigMap 是用于存储非敏感配置数据的 API 对象,它可以被挂载到 Pod 中作为文件或环境变量。ConfigMap 的热更新指的是在不重启 Pod 的情况下,动态…

Linux 之 journalctl 查看系统与 kernel 日志

目录 1. Linux 之 journalctl 查看系统与 kernel 日志 1. Linux 之 journalctl 查看系统与 kernel 日志 1 概述 日志管理工具 journalctl 是 centos7 上专有的日志管理工具, 该工具是从 message 这个文件里读取信息。Systemd 统一管理所有 Unit 的启动日志。带来的好处就是, …

光敏传感器模块(YH-LDR)

目录 1. YH-LDR模块说明 1.1 简介 1.2 YH-LDR 模块的引脚说明 1.3 LDR 传感器工作原理与输出特性 2. 使用单片机系统控制 YH-LDR 模块 2.1 通用控制说明 1. YH-LDR模块说明 1.1 简介 YH-LDR 是野火设计的光强传感器,使用一个光敏电阻作为采集源&#x…

QString::fromLocal8Bit

QString::fromLocal8Bit QString::fromLocal8Bit 是 Qt 框架中的一个函数,用于将本地编码(Local 8-bit)的字符串转换为 QString 类型的字符串。下面对这个函数进行解释: QString QString::fromLocal8Bit(const char *str);str 是…

【C++】多线程的学习笔记(3)——白话文版(bushi

目录 前一篇内容(mutex锁) 前言 Condition Variable的简介 Condition Variable的使用方法 wait方法 wait for函数与wait until函数 notify函数 notify_one notify_all 注意 前一篇内容(mutex锁) 【C】多线程的学习笔记&…

Hive默认分割符、存储格式与数据压缩

目录 1、Hive默认分割符2、Hive存储格式3、Hive数据压缩 1、Hive默认分割符 Hive创建表时指定的行受限(ROW FORMAT)配置标准HQL为: ... ROW FORMAT DELIMITED FIELDS TERMINATED BY \u0001 COLLECTION ITEMS TERMINATED BY , MAP KEYS TERMI…

pythongui实时闹钟

# codinggbk import tkinter as tk from time import strftime# 创建一个主窗口 root tk.Tk() root.title("实时闹钟")# 设置窗口的大小不可变 root.resizable(False, False)# 设置窗口始终保持在最上层 root.attributes(-topmost, True)# 更新时间的函数 def time(…

java游戏制作-拼图游戏

一.制作主界面 首先创建一个Java项目命名为puzzlegame。 再在src中创建一个包,用来制作主界面 代码: 结果: 二.设置界面 代码: 三.初始化界面 代码: 优 化代码: 结果: 四.添加图片 先在Java项…

mysql查询json字符串内容

参考文章:mysql json 基础查询_mysql json查询-CSDN博客 mysql查询json字符串内容 (多层数组嵌套) select id,nameJSON_EXTRACT(JSON_UNQUOTE(JSON_EXTRACT(JSON_UNQUOTE(config_json), $.baseInfo)), $.template_list[*].sms_content) s…

Golang Context 的使用指南

Golang Context 的使用指南 1. 什么是 Context 在 Golang 中,Context 是一个用于跨 goroutine 传递数据、取消任务以及超时控制的标准库。它提供了一种从父 goroutine 向子 goroutine 传递请求或控制信息的机制,可以有效地管理和控制 goroutine 的生命…

kafka入门(一):kafka消息发送与消费

kafka的基础概念 Producer (消息生产者) 向主题发布消息的客户端应用程序称为生产者(Producer),生产者用于持续不断的向某个主题发送消息。 Consumer (消息消费者) 订阅主题消息的客户端程序称为消费者(Consumer),消费者用于处理生产者产生的消息。 Co…

03 前后端数据交互【小白入门SpringBoot + Vue3】

项目笔记,教学视频来源于B站青戈 https://www.bilibili.com/video/BV1H14y1S7YV 前两个笔记。是把前端页面大致做出来,接下来,把后端项目搞一下。 后端项目,使用IDEA软件、jdk1.8、springboot2.x 。基本上用的是稳定版。 还有My…

【C++】chono库:使用及源码分析

文章目录 0. 概述1. duration1.1 分析std::chrono::duration_cast() 1.2 使用案例std::chrono::duration::count() 1.3 部分源码 2. time_point2.1 分析std::chrono::time_point_cast() 2.2 使用举例std::chrono::time_point::time_since_epoch() 2.3 部分源码 0. 概述 本篇文…

python使用selenium webDriver时 报错

可能原因和解决: 1. python 解释器 ----> 设置 2. 浏览器版本 与 浏览器驱动版本不一致 ----> 安装同一版本的 (下载chromedriver | 谷歌驱动更高版本的测试版) 参考:Python使用Selenium WebDriver的入门介绍及安装教程-CSDN博客 Selenium安…

设计模式-行为型模式-策略模式

一、什么是策略模式 策略模式是一种行为设计模式,它允许在运行时选择算法或行为,并将其封装成独立的对象,使得这些算法或行为可以相互替换,而不影响使用它们的客户端。(ChatGPT生成) 主要组成部分&#xff…

基于django的在线教育系统

基于python的在线教育系统 摘要 基于Django的在线教育系统是一种利用Django框架开发的现代化教育平台。该系统旨在提供高效、灵活、易用的在线学习体验,满足学生、教师和管理员的需求。系统包括学生管理、课程管理、教师管理、视频课程、在线测验等核心功能。系统采…

docker 部署Redis集群(三主三从,以及扩容、缩容)

1:创建6个redis容器 docker run -d --name redis01 --net host --privilegedtrue -v /opt/redis/redis01:/data redis:6.0.8 --cluster-enabled yes --appendonly yes --port 6381 docker run -d --name redis02 --net host --privilegedtrue -v /opt/redis/redis0…

在线 sha1 加密

ttmd5 http://www.ttmd5.com/hash.php?type5 qqxiuzi https://www.qqxiuzi.cn/bianma/sha-1.htm jb51 http://tools.jb51.net/password/sha_encode

Kubernetes实战(五)-pod之间网络请求实战

1 同namespace内pod网络请求 1.1 创建namespace ygq $ kubectl create namespace ygq namespace/ygq created 1.2 创建svc和deployment 在naemspace ygq下创建两个应用:nginx和nginx-test。 1.2.1 部署应用nginx $ cat nginx-svc.yaml apiVersion: v1 kind: …

立哥国家示范项目-5G智慧文旅

项目总体技术方案: 1、旅游5G专网建设:是基于公网授权频谱,采用专线形式,使用MEC服务器为用户提供服务,边缘计算使用Edge VLAVR支持多类型应用,并通过编排实现边缘业务的构建。解决了信号密度覆盖小、强度弱的问题。 …