微服务使用swagger-ui工具，跨域问题

问题描述

使用swagger工具测试微服务时，出现端口号不一致的跨域问题，如下图

解决方案

在nginx中配置proxy_pass代理，解决跨域，如下配置 nginx.conf


#user  nobody;
worker_processes  1;#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;#pid        logs/nginx.pid;events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;#access_log  logs/access.log  main;sendfile        on;#tcp_nopush     on;#keepalive_timeout  0;keepalive_timeout  65;#gzip  on;upstream proxyUrl{server localhost:8080;}server {listen       3200;server_name  localhost;#charset koi8-r;location  ~*\.(.*?) {  root   E:\文档\Projects\swagger-ui-master\dist;  } #access_log  logs/host.access.log  main;location  / {proxy_pass http://proxyUrl;index  index.html index.htm;if ($request_method = 'OPTIONS') {add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';              add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';add_header 'Access-Control-Max-Age' 1728000;add_header 'Content-Type' 'text/plain charset=UTF-8';add_header 'Content-Length' 0;return 204;}if ($request_method = 'POST') {add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';}if ($request_method = 'GET') {add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';}}}
}

nginx.conf 配置项说明

 upstream proxyUrl{server localhost:8080;}server {listen       3200;server_name  localhost;location  / {proxy_pass http://proxyUrl;index  index.html index.htm;}location  ~* \.html$ {  root   E:\文档\Projects\swagger-ui-master\dist;index  index.html index.htm;       }}

以上配置结果说明如下：

访问地址	代理或访问地址
http://localhost:3200/index.html	http://localhost:3200/index.html
http://localhost:3200/xxx	http://localhost:8080/xxx

效果展示

写在最后

笔者也是刚接触这方面，经验不足，文章只供参考。如有不妥或误导，请不吝赐教

微服务使用swagger-ui工具，跨域问题相关推荐

pc网站调用微服务器,【微服务】前后端分离-跨域问题和解决方案
跨域问题存在的原因跨域问题的根本原因:因为浏览器收到同源策略的限制,当前域名的js只能读取同域下的窗口属性.什么叫做同源策略?就是不同的域名, 不同端口, 不同的协议不允许共享资源的,保障浏览器安全 ...
微信开发者工具跨域问题
如何不用将前端代码上传到远程服务器,也能够在本地进行远程调试?(解决跨域问题) 解决 1.修改路径将安装好的"微开发者工具"移动到没有中文路径的地址,然后将"微信开发者 ...
golang 比较完美的通用框架，kratos v2.0 学习，一套轻量级 Go 微服务框架，包含大量微服务相关框架及工具。涵盖了互联网开发的常用功能模块的开发库。
目录前言 1,关于kratos v2.0 2,Principles 原则 2,Features 特色 3,Architecture 架构 4,总结前言本文的原文连接是: https://blog ...
❤️《微服务开发—Swagger》（建议收藏）
Swagger 文章目录 Swagger 1.Swagger的作用和概念 1.Swagger 的优势 2.SwaggerUI 特点 2.SpringBoot集成Swagger 3.配置Swagger ...
服务端配置实现AJAX跨域请求
2019独角兽企业重金招聘Python工程师标准>>> 一直以为AJAX跨域是无法逾越的鸿沟,最近发现原来在服务端可以通过发送header信息来允许AJAX跨域请求. PHP代码示例 ...
微服务架构具体实现工具框架：Spring Boot概览与核心原理
目录一.Spring Boot概述 1.回顾使用Spring开发WEB应用程序过程 2.新一代开发框架的诞生Spring Boot 编码方面配置方面部署方面监控方面 3.SpringBoot核 ...
Vue移动端框架Mint UI接口跨域问题
自己写了一个json数据,放在服务器上,现在要通过vue项目调用数据 http://www.intmote.com/test.json 我现在要调用在调用接口数据的时候的时候会出现这样的报错 Ac ...
mac 下chrome 和微信web开发工具跨域配置
chrome open -a /Applications/Google\ Chrome.app --args --disable-web-security --user-data-dir 微信开发工具 ...
解决微信web开发工具跨域问题
1.点击微信开发者工具,击右键, 选择"属性",打开面板之后,选择"快捷方式" => "目标" 2.在目标那一行的最后,输入" ...
springcloud微服务中跨域配置
跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对 javascript 施加的安全限制. 同源策略,指的是协议,域名,端口都要相同,其中有一个不同都会产生跨域. 跨域 ...

微服务使用swagger-ui工具，跨域问题

问题描述

解决方案

nginx.conf 配置项说明

效果展示

写在最后

微服务使用swagger-ui工具，跨域问题相关推荐

最新文章

热门文章