如何解决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.1
    container_name: docker-demo
    deploy:
      resources:
        limits:
          cpus: '0.80'
          memory: 300M
        reservations:
          cpus: '0.05'
          memory: 100M
    ports:
    - 80:8080
    restart: on-failure
    logging:
      driver: json-file
      options:
        max-size: 5m
        max-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-

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

提升 Python 执行速度:Codon、C/C++、Rust、Numba(JIT)、Taichi、Nuitka、MatxScript

几种流行的 Python 性能加速方案对比:https://zhuanlan.zhihu.com/p/604519817 对于一般通用场景用户,对性能没有那么强烈的诉求,紧跟官方步伐,升级到最新版本的 Python 既可,或者使用 PyPy。Numba、Codon、Taichi 等这…

电子画册真的好好用,制作也简单,都快来学学!

同纸质画册相比,电子画册无需受时间、空间、地域等限制,它通过手机、电脑即可发送文件,轻松实现在线浏览,使用起来更方便。 如何制作电子画册?这里同大家分享一下超简单的电子画册制作教程,0基础也能轻松上…

机器学习的医疗乳腺癌数据的乳腺癌疾病预测

项目视频讲解:基于机器学习的医疗乳腺癌数据的乳腺癌疾病预测 完整代码数据分享_哔哩哔哩_bilibili 效果演示: 代码: #第一步!导入我们需要的工具 import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns %matplotlib inlin…

kubenetes-容器网络接口CNI

一、CNI Kubernetes 网络模型设计的基础原则是: 所有的Pod能够不通过NAT(网络地址转换)就能相互访问。所有的节点能够不通过NAT就能相互访问。容器内看见的IP地址和外部组件看到的容器IP是一样的。 Kubernetes的集群里,IP地址是以Pod为单位进行分配的…

IoC DI

Spring 的两大核心思想 : IoC 和 AOP 我们要将对象的控制权交给Spring ,我们就需要告诉 Spring 哪些对象是需要帮我们进行创建的,这里有两类注解可以实现 : 类注解(Controller Service Repository Component Configuration)和方法注解(Bean) 这五大注解都表示把这个对象交给…

2023-11-18 LeetCode每日一题(数位和相等数对的最大和)

2023-11-18每日一题 一、题目编号 2342. 数位和相等数对的最大和二、题目链接 点击跳转到题目位置 三、题目描述 给你一个下标从 0 开始的数组 nums ,数组中的元素都是 正 整数。请你选出两个下标 i 和 j(i ! j),且 nums[i] …

深入理解网络协议:通信世界的基石

💂 个人网站:【 海拥】【神级代码资源网站】【办公神器】🤟 基于Web端打造的:👉轻量化工具创作平台💅 想寻找共同学习交流的小伙伴,请点击【全栈技术交流群】 在当今数字化时代,网络协议是连接世…

Windows下安装RabbitMQ

1.安装Erlang 因为RabbitMQ是用Erlang语言编写的,所以在安装RabbitMQ之前需要先安装Erlang。 如果还未安装Erlang,官方下载安装包,点击Download Windows installer下载Erlang Downloads - Erlang/OTP 下载Erlang/OTP后,双击otp的…

JavaScript管理HTMLDOM元素(增删改查)

本文主要讲解JavaScript如何通过管理HTML上的DOM元素&#xff0c;其中包括如何查询、创建、修改以及删除具体功能和源码讲解。 增加 首先我们准备一个HTML框架和简单CSS样式&#xff0c;我对其中元素作用和关系进行一个简单说明。 <!DOCTYPE html> <html><he…

2023年道路运输企业主要负责人证考试题库及道路运输企业主要负责人试题解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年道路运输企业主要负责人证考试题库及道路运输企业主要负责人试题解析是安全生产模拟考试一点通结合&#xff08;安监局&#xff09;特种作业人员操作证考试大纲和&#xff08;质检局&#xff09;特种设备作业人…

C#特性(Attribute)

C#特性&#xff08;Attribute&#xff09;是一种在程序中添加元数据的机制&#xff0c;它可以为代码提供额外的信息和指示。通过使用特性&#xff0c;我们可以为类、方法、属性等元素添加标记&#xff0c;以便在运行时进行更多的操作和决策。 C#特性是一种声明式编程的工具&…

计算机网络的体系结构

目录 一. 计算机体系结构的形成二. 协议与层次划分2.1 数据传输过程2.2 什么是网络协议2.3 网络协议的三要素2.4 协议有两种形式2.4 各层协议2.5 什么是复用和分用 \quad 一. 计算机体系结构的形成 \quad 计算机网络是一个非常复杂的系统, 相互通信的两个计算机系统必须高度协调…

二叉树中的深搜之二叉树的所有路径

257. 二叉树的所有路径 - 力扣&#xff08;LeetCode&#xff09; 对于二叉树的深度搜索&#xff0c;要学会从以下三个角度来去看待问题&#xff1a; 1. 全局变量&#xff0c;有时候全局变量会减少参数的个数&#xff0c;简化很多流程&#xff1b; 这道题目&#xff0c;要返回根…

linux配置固定ip(两种方法)

首先刚下载的vm&#xff0c;刚创建的虚拟机&#xff0c;肯定是需要配置ip的 其次以前我的每次都是设置自动ip&#xff0c;这样每次登录都会自动获取ip地址&#xff0c;并且每次的ip都不相同。 ~方法&#xff1a; 开机登陆后 1)Cd /etc/sysconfig/network-scripts 2)Vi ifcf…

vue3的Watch使用详解

vue官网提到&#xff1a; watch 的第一个参数可以是不同形式的“数据源”&#xff1a;它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组&#xff1a; 1.监听单个Ref 2.监听一个getter函数 当然只修x或者y其中一个的值&#xff0c;…

LeetCode - 26. 删除有序数组中的重复项 (C语言,快慢指针,配图)

力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 思路一&#xff1a;快慢指针 在数组中&#xff0c;快慢指针就是两个整数下标&#xff0c;定义 fast 和 slow 这里我们从下标1开始&#xff08;下标0的数据就1个&#xff0c;没有重复项&#xff09;&…

Java Web 实战 19 - What‘s HTTP ?

Whats HTTP ? 一 . HTTP 是什么 ?1.1 理解 HTTP 协议的工作过程1.2 HTTP 的报文格式1.2.1 准备工作1.2.2 认识 HTTP 协议的报文详情请求报文请求响应 二 . HTTP 请求报文2.1 URLURL 的 encode 2.2 HTTP 协议中的方法GETPOST常见面试题 : GET 和 POST 之间的区别 2.3 认识请求…

Java Web——JavaScript基础

1. 引入方式 JavaScript程序不能独立运行&#xff0c;它需要被嵌入HTML中&#xff0c;然后浏览器才能执行 JavaScript 代码。 通过 script 标签将 JavaScript 代码引入到 HTML 中&#xff0c;有3种方式&#xff1a; 1.1. 内嵌式(嵌入式) 直接写在html文件里&#xff0c;用s…

继承语法详解

继承语法详解 一:继承1&#xff1a;什么是继承 二&#xff1a;访问成员变量三&#xff1a;访问成员方法四&#xff1a;访问父类的成员变量和成员方法super关键字super和this关键字的区别 五&#xff1a;子类的构造方法六&#xff1a;代码块七&#xff1a;final关键字八&#xf…

Vulhub靶场-KIOPTRIX: LEVEL 1

目录 环境配置 端口扫描 漏洞发现 mod_ssl漏洞利用 Samba远程代码执行漏洞利用 环境配置 首先去官网下载靶场导入到虚拟机中 下载地址&#xff1a;Kioptrix: Level 1 (#1) ~ VulnHub 下载完成之后导入到vmware中 这里需要改nat&#xff0c;桥接模式的靶机拿不到IP&…