使用vue做商城网站项目难点,北京微网站设计开发服务,如何向谷歌提交网站,网站的建设心得文章目录 一#xff0c;序言二#xff0c;问题重现1. 运行swagger-editor2. 运行接口服务3. 问题重现步骤 三#xff0c;解决问题思路1. 去除浏览器安全限制2. 服务器接口统一处理3. 委托nginx转发 四#xff0c;完整接口代码传送 一#xff0c;序言
在 Docker 运行swagg… 文章目录 一序言二问题重现1. 运行swagger-editor2. 运行接口服务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.80memory: 300Mreservations:cpus: 0.05memory: 100Mports:- 80:8080restart: on-failurelogging:driver: json-fileoptions:max-size: 5mmax-file: 1运行命令启动接口服务
docker-compose up -d3. 问题重现步骤
打开接口文档复制单个接口文档 将内容粘贴到swagger-editor左边, 依次点击 try it out、Execute 发现接口报错跨域调用被拒绝。
三解决问题思路
1. 去除浏览器安全限制
客户端行为不太建议大家可以自行搜索浏览器关闭跨域限制、chrome关闭跨域限制
2. 服务器接口统一处理
springmvc或springboot工程统一在需要允许跨域的类或方法上添加CrossOrigin注解 此方法在可以改造接口代码的情况下建议采用。
3. 委托nginx转发
具体思路就是客户端A需要访问接口C因跨域无法直接访问 #mermaid-svg-Odj6lgYcpxWSl1CR {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Odj6lgYcpxWSl1CR .error-icon{fill:#552222;}#mermaid-svg-Odj6lgYcpxWSl1CR .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Odj6lgYcpxWSl1CR .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-Odj6lgYcpxWSl1CR .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Odj6lgYcpxWSl1CR .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Odj6lgYcpxWSl1CR .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Odj6lgYcpxWSl1CR .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Odj6lgYcpxWSl1CR .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Odj6lgYcpxWSl1CR .marker.cross{stroke:#333333;}#mermaid-svg-Odj6lgYcpxWSl1CR svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Odj6lgYcpxWSl1CR .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-Odj6lgYcpxWSl1CR .cluster-label text{fill:#333;}#mermaid-svg-Odj6lgYcpxWSl1CR .cluster-label span{color:#333;}#mermaid-svg-Odj6lgYcpxWSl1CR .label text,#mermaid-svg-Odj6lgYcpxWSl1CR span{fill:#333;color:#333;}#mermaid-svg-Odj6lgYcpxWSl1CR .node rect,#mermaid-svg-Odj6lgYcpxWSl1CR .node circle,#mermaid-svg-Odj6lgYcpxWSl1CR .node ellipse,#mermaid-svg-Odj6lgYcpxWSl1CR .node polygon,#mermaid-svg-Odj6lgYcpxWSl1CR .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Odj6lgYcpxWSl1CR .node .label{text-align:center;}#mermaid-svg-Odj6lgYcpxWSl1CR .node.clickable{cursor:pointer;}#mermaid-svg-Odj6lgYcpxWSl1CR .arrowheadPath{fill:#333333;}#mermaid-svg-Odj6lgYcpxWSl1CR .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-Odj6lgYcpxWSl1CR .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-Odj6lgYcpxWSl1CR .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-Odj6lgYcpxWSl1CR .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-Odj6lgYcpxWSl1CR .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-Odj6lgYcpxWSl1CR .cluster text{fill:#333;}#mermaid-svg-Odj6lgYcpxWSl1CR .cluster span{color:#333;}#mermaid-svg-Odj6lgYcpxWSl1CR div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-Odj6lgYcpxWSl1CR :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 跨域访问失败 客户端A 接口C 现在服务器B安装nginx服务客户端A直接将请求发送到服务器B某端口由nginx将请求转发给接口C #mermaid-svg-oh7UyzlkZrxCViIt {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-oh7UyzlkZrxCViIt .error-icon{fill:#552222;}#mermaid-svg-oh7UyzlkZrxCViIt .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-oh7UyzlkZrxCViIt .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-oh7UyzlkZrxCViIt .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-oh7UyzlkZrxCViIt .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-oh7UyzlkZrxCViIt .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-oh7UyzlkZrxCViIt .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-oh7UyzlkZrxCViIt .marker{fill:#333333;stroke:#333333;}#mermaid-svg-oh7UyzlkZrxCViIt .marker.cross{stroke:#333333;}#mermaid-svg-oh7UyzlkZrxCViIt svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-oh7UyzlkZrxCViIt .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-oh7UyzlkZrxCViIt .cluster-label text{fill:#333;}#mermaid-svg-oh7UyzlkZrxCViIt .cluster-label span{color:#333;}#mermaid-svg-oh7UyzlkZrxCViIt .label text,#mermaid-svg-oh7UyzlkZrxCViIt span{fill:#333;color:#333;}#mermaid-svg-oh7UyzlkZrxCViIt .node rect,#mermaid-svg-oh7UyzlkZrxCViIt .node circle,#mermaid-svg-oh7UyzlkZrxCViIt .node ellipse,#mermaid-svg-oh7UyzlkZrxCViIt .node polygon,#mermaid-svg-oh7UyzlkZrxCViIt .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-oh7UyzlkZrxCViIt .node .label{text-align:center;}#mermaid-svg-oh7UyzlkZrxCViIt .node.clickable{cursor:pointer;}#mermaid-svg-oh7UyzlkZrxCViIt .arrowheadPath{fill:#333333;}#mermaid-svg-oh7UyzlkZrxCViIt .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-oh7UyzlkZrxCViIt .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-oh7UyzlkZrxCViIt .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-oh7UyzlkZrxCViIt .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-oh7UyzlkZrxCViIt .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-oh7UyzlkZrxCViIt .cluster text{fill:#333;}#mermaid-svg-oh7UyzlkZrxCViIt .cluster span{color:#333;}#mermaid-svg-oh7UyzlkZrxCViIt div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-oh7UyzlkZrxCViIt :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 客户端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-
