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解决前端调用后端接口跨域问题的更多相关文章

  1. axios解决调用后端接口跨域问题

    vue-cli通过是本地代理的方式解决接口跨域问题的.但是在vue-cli的默认项目配置中这个代理是没有配置的,如果现在项目中使用,必须手动配置config/index.js文件 ... proxyT ...

  2. 前后端分离框架前端react,后端springboot跨域问题分析

    前后端分离框架前端react,后端springboot跨域问题分析 为啥跨域了 前端react的设置 springboot后端设置 为啥跨域了 由于前后端不在一个端口上,也是属于跨域问题的一种,所以必 ...

  3. 用 Nokitjs 解决前端开发中的跨域问题

    问题 在开发一些「单页应用」时,通常会使用 Ajax 和服务器通讯,比如 RESTful API,通常「前端」和「服务端 API」可能是有不同人员在负责,也不在同一个工程下,那么开发过程中就可能会遇到 ...

  4. 解决jquery调用NET webservice跨域的问题

    声明,解决方案由网上收集而来,个人整理.有别人的,也有我的. 一.webserive端 1.web.config 需要在web.config的configuration节点中加入如下的黑体部分内容. ...

  5. 前端调用后端接口下载excel文件的几种方式

    今天有一个导出相应数据为excel表的需求.后端的接口返回一个数据流,一开始我用axios(ajax类库)调用接口,返回成功状态200,但是!但是浏览器没有自动下载excel表,当时觉得可能是ajax ...

  6. 前端调用后端接口返回200(成功状态码),后端有返回,但是控制台Network Response为空,没展示任何信息

    解决方法: 1.在js里面debugger,可以看到后台是否有返回数据. 2.直接console.log(),直接把返回值打印出来,查看返回的数据格式,方便前端进行数据的处理. PS:因为后端返回的数 ...

  7. 解决Vue调用springboot接口403跨域问题

    最近在做一个前后端分离的项目, 前端用的是Vue后端使用的是springboot, 在项目整合的时候发现前端调用后端接口报错403跨域请求问题 前端跨域请求已解决, 那么问题就出在后端了, 找了一些资 ...

  8. SpringCloud微服务之跨服务调用后端接口

    SpringCloud微服务系列博客: SpringCloud微服务之快速搭建EurekaServer:https://blog.csdn.net/egg1996911/article/details ...

  9. luffy后端之跨域corf的解决方法

    跨域CORS 我们现在为前端和后端分别设置两个不同的域名 window 系统: C:\Windows\System32\drivers\etc\host linux/mac系统: /etc/hosts ...

随机推荐

  1. Python dict字典方法完全攻略(全)

    我们知道,Python 字典的数据类型为 dict,我们可使用 dir(dict) 来查看该类型包含哪些方法,例如: >>> dir(dict)['clear', 'copy', ' ...

  2. vue的slot

    1.明确一点:分发内容是在父作用域内编译: 2.slot作为备用内容的条件:宿主元素为空且父元素没有要分发的内容. 3.具名slot:<slot name="XXX"> ...

  3. js 前端实现文件流下载的几种方式

    后端是用Java写的一个下载的接口,返回的是文件流,需求:点击,请求,下载 利用iframe实现文件流下载 //把上一次创建的iframe删掉,不然随着下载次数的增多页面上会一堆的iframe var ...

  4. MySQL的列约束

    1.列约束 (1)主键约束——PRIMARY KEY (2)非空约束——NOT NULL 声明了非空约束的列上,不允许使用NULL (3)唯一约束——UNIQUE 声明了唯一约束的列上不能插入重复的值 ...

  5. Django之内置分页器(paginator)

    django分页: from django.shortcutsimportrender from django.core.paginator import Paginator,EmptyPage, P ...

  6. React安装及使用

    学习React之前.你可能需要学习: Html5.Css3.React.Antd.js. Html5的学习网站:http://www.w3school.com.cn/ Css3学习网站:http:// ...

  7. 愉快地使用Windows Terminal

    有了Windows Terminal 你再也不需要其他任何终端了-- 下载 直接到Windows 10 自带的应用商店下载安装.参考: https://github.com/Microsoft/Ter ...

  8. Springboot 关于日期时间格式化处理方式总结

    项目中使用LocalDateTime系列作为DTO中时间的数据类型,但是SpringMVC收到参数后总报错,为了配置全局时间类型转换,尝试了如下处理方式. 注:本文基于Springboot2.x测试, ...

  9. windows 10 2016 企业版 长期服务 激活方式

    试了很多,失败. 使用这个ok———————————————————————————————— 使用方式: 2.1.下载AAct.exe  https://www.baidu.com/link?url ...

  10. PLC可编程控制器的结构和工作原理

    PLC的可编程控制器由的功能结构由cpu中央处理器,存储器和输入输出借口三部分组成 CPU Cpu的功能是完成plc所有的的控制和监视, Cpu中央处理去由控制器,寄存器,运算器.通过数据总线,地址总 ...