Nginx解决前端调用后端接口跨域问题
1、项目中遇到的问题描述:
前端调用zuul统一网关服务接口,请求状态码200,但是无返回数据。
浏览器控制台报错信息:No Access-Control-Allow-Origin header is present on requested resource .
2、解决问题
借鉴https://blog.csdn.net/envon123/article/details/83270277博客。
项目配置如下:
location /xxxx-server { #/xxxx-server不能以/结尾
add_header 'Access-Control-Allow-Origin' $http_origin;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
#springcloud的zuul组件对外统一网关,xxxx-server是springcloud的后台服务组件
proxy_pass http://127.0.0.1/xxxx-server; #/xxxx-server不能以/结尾
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
Nginx解决前端调用后端接口跨域问题的更多相关文章
- axios解决调用后端接口跨域问题
vue-cli通过是本地代理的方式解决接口跨域问题的.但是在vue-cli的默认项目配置中这个代理是没有配置的,如果现在项目中使用,必须手动配置config/index.js文件 ... proxyT ...
- 前后端分离框架前端react,后端springboot跨域问题分析
前后端分离框架前端react,后端springboot跨域问题分析 为啥跨域了 前端react的设置 springboot后端设置 为啥跨域了 由于前后端不在一个端口上,也是属于跨域问题的一种,所以必 ...
- 用 Nokitjs 解决前端开发中的跨域问题
问题 在开发一些「单页应用」时,通常会使用 Ajax 和服务器通讯,比如 RESTful API,通常「前端」和「服务端 API」可能是有不同人员在负责,也不在同一个工程下,那么开发过程中就可能会遇到 ...
- 解决jquery调用NET webservice跨域的问题
声明,解决方案由网上收集而来,个人整理.有别人的,也有我的. 一.webserive端 1.web.config 需要在web.config的configuration节点中加入如下的黑体部分内容. ...
- 前端调用后端接口下载excel文件的几种方式
今天有一个导出相应数据为excel表的需求.后端的接口返回一个数据流,一开始我用axios(ajax类库)调用接口,返回成功状态200,但是!但是浏览器没有自动下载excel表,当时觉得可能是ajax ...
- 前端调用后端接口返回200(成功状态码),后端有返回,但是控制台Network Response为空,没展示任何信息
解决方法: 1.在js里面debugger,可以看到后台是否有返回数据. 2.直接console.log(),直接把返回值打印出来,查看返回的数据格式,方便前端进行数据的处理. PS:因为后端返回的数 ...
- 解决Vue调用springboot接口403跨域问题
最近在做一个前后端分离的项目, 前端用的是Vue后端使用的是springboot, 在项目整合的时候发现前端调用后端接口报错403跨域请求问题 前端跨域请求已解决, 那么问题就出在后端了, 找了一些资 ...
- SpringCloud微服务之跨服务调用后端接口
SpringCloud微服务系列博客: SpringCloud微服务之快速搭建EurekaServer:https://blog.csdn.net/egg1996911/article/details ...
- luffy后端之跨域corf的解决方法
跨域CORS 我们现在为前端和后端分别设置两个不同的域名 window 系统: C:\Windows\System32\drivers\etc\host linux/mac系统: /etc/hosts ...
随机推荐
- Git创建子分支,合并分支并提交到Gitee码云
Git合并分支后,需要将子分支提交到git仓库,这个时候就需要单独提交子分支,其步骤如下: 先创建子分支,并包含最新当前分支下的修改数据 git checkout -b sonBranch 将新分支内 ...
- PHP 获取上个月1号和上个月最后一天时间戳,下个月1号和下个月最后一天的时间戳
// 上个月的时间戳 $thismonth = date('m'); $thisyear = date('Y'); if ($thismonth == 1) { $lastmonth = 12; $l ...
- 四使用浮动div布局
刚开始学习的小白,如有不足之处还请各位补充,感激涕零.在html中有两种方式布局<table>表格和<div>,个人剧的使用表格布局可以避免bug产生,并且表格布局相对来说要容 ...
- SpringCloud(三)- OpenFeign简介及@FeignClient等注解的使用
唯能极于情,故能极于剑 有问题或错误请及时联系小编或关注小编公众号 "CodeCow",小编一定及时回复和改正,期待和大家一起学习交流 此文由四部分组成(OpenFeign简介.@ ...
- JavaScript的流程控制语句以及函数
一.流程控制 1. 作用:控制代码的执行顺序 2. 分类 2.1顺序结构:从上到下依次执行代码语句 2.2选择结构: 1. if语句 简单if结构 if(条件表达式){ 表达式成立时执行的代码段 } ...
- winform 数据(双向)绑定 快速更新实体
写点东西感觉特别累,也已经很久没写了. 最近在做一个winform类型的系统,其涉及到大量的表,有些表又包含大量的字段,所以当添加.更新实体时便会十分的繁琐,一方面:需要把界面上的字段绑定到对应的实体 ...
- js解析MarkDown语法
1.问题描述: 我们使用MarkDown编辑器之后,比如我们写的MarkDown的语法是: # 一级标题 ## 二级标题 ### 三级标题 这种语法我们最终要转换成HTML的格式最终要存入数据库 ...
- [Python基础]006.IO操作
IO操作 输入输出 print raw_input input 文件 打开文件 关闭文件 读文件 写文件 文件指针 实例 输入输出 输入输出方法都是Python的内建函数,并且不需要导入任何的包就可以 ...
- 浅谈SIEM
一.概念 SIEM ( Security Information Event Management,安全信息与事件管理) Gartner的定义:安全信息和事件管理(SIEM)技术通过对来自各种事件和上 ...
- [03]HTML基础之行内标签
1.<ruby>标签 显示东亚字符的发音(如中文,日文等),与<rp>,<rt>标签搭配. //<ruby>为单个发音字符的容器,<rp>为 ...