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 ...
随机推荐
- C# 数据操作系列 - 9. EF Core 完结篇
0.前言 <EF Core>实际上已经可以告一段落了,但是感觉还有一点点意犹未尽.所以决定分享一下,个人在实际开发中使用EF Core的一些经验和使用的扩展包. 1. EF Core的异步 ...
- GreenPlum-数据存储目录迁移及常用操作
一.环境介绍 Greenplum5 3节点集群,Centos7.2虚拟机, 二.需求 因为/home目录磁盘空间已满,需要将Greenplum的数据存储目录转移到新的分区/opt目录下,虚拟机磁盘管理 ...
- 201771010120 苏浪浪 面向对象程序设计(Java)第10周
1.实验目的与要求 (1) 理解泛型概念: (2) 掌握泛型类的定义与使用: (3) 掌握泛型方法的声明与使用: (4) 掌握泛型接口的定义与实现: (5)了解泛型程序设计,理解其用途. 2.实验 ...
- Java——日期格式化YYYYMMdd与yyyyMMdd的区别
public static void main(String[] args) { //YYYY 是表示:当天所在的周属于的年份,一周从周日开始,周六结束,只要本周跨年,那么这周就算入下一年. //20 ...
- 封装 private
封装表现: 1.方法就是一个最基本封装体. 2.类其实也是一个封装体. 从以上两点得出结论,封装的好处: 1.提高了代码的复用性. 2.隐藏了实现细节,还要对外提供可以访问的方式.便于调用者的使用.这 ...
- 深入理解JS:执行上下文中的this(一)
目录 执行上下文与执行上下文栈 this 全局环境 函数环境 总结 参考 1.执行上下文与执行上下文栈 (1)什么是执行上下文? 在 JavaScript 代码运行时,解释执行全局代码.调用函数或使用 ...
- 使用容器化块存储OpenEBS在K3s中实现持久化存储
作者简介 Giridhara Prasad,Mayadata Inc.首席工程师.在软件测试自动化.混沌工程(chaos engineering)方面有丰富的经验.目前,他正在研究开源混沌工程项目Li ...
- pytest常用命令参数
pytest 参数 1.参数:-s 运行过程中执行print打印函数:pytest -s,以下两个输出 上边带参数,下边不带 2.参数: --collect-only 收集将要执行的用例,但不会执行用 ...
- 一键部署open***服务
一键部署超级简单易用的openvpn服务器,支持多证书+多账号[密码]认证 一. 服务器端部署 项目地址:https://github.com/guoew/openvpn-install 1.1. 下 ...
- data类型的url
所谓"data"类型的Url格式,是在RFC2397中 提出的,目的对于一些"小"的数据,可以在网页中直接嵌入,而不是从外部文件载入.例如对于img这个Ta ...