解决跨域问题:No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。

PS:如果遇到 这个问题 Request header field Content-Type is not allowed by Access-Control-Allow-Headers,解决方法见另一博文:解决:Request header field Content-Type is not allowed by Access-Control-Allow-Headers

 

1. 场景描述:

我前端是一个 vue 工程,写的是绝对 URL 请求后端工程接口,报错如题:

No 'Access-Control-Allow-Origin' header is present on the requested resource

2.解决方法,后端开放跨域:新增一个过滤器,设置头信息。

重点是这个设置:

response.setHeader("Access-Control-Allow-Origin", "*");
package gentle.filter;import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;/*** 解决跨域设置* (可把此设置放在 nginx 中,但只能设置一处)** @author silence* @date 2018/12/11 15:19*/@WebFilter(filterName = "requestFilter", urlPatterns = {"/*"})
public class RequestFilter implements Filter {@Overridepublic void init(FilterConfig filterConfig) throws ServletException {}@Overridepublic void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {HttpServletResponse response = (HttpServletResponse) servletResponse;HttpServletRequest request = (HttpServletRequest) servletRequest;// 此处 setHeader、addHeader 方法都可用。但 addHeader时写多个会报错:“...,but only one is allowed”response.setHeader("Access-Control-Allow-Origin", "*"); 
//        response.addHeader("Access-Control-Allow-Origin", request.getHeader("origin"));// 解决预请求(发送2次请求),此问题也可在 nginx 中作相似设置解决。response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Cache-Control,Pragma,Content-Type,Token, Content-Type");response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");response.setHeader("Access-Control-Max-Age", "3600");response.setHeader("Access-Control-Allow-Credentials", "true");String method = request.getMethod();if (method.equalsIgnoreCase("OPTIONS")) {servletResponse.getOutputStream().write("Success".getBytes("utf-8"));} else {filterChain.doFilter(servletRequest, servletResponse);}}@Overridepublic void destroy() {}}

 再次请求,可以了。

 

3. 前后端工程也有作反向代理。前端工程部署时使用浏览器默认端口:80 。后端工程端口为 8089 。nginx 监听端口 8082 。

前端请求后端 URL 为:http://  nginx所在服务器 IP : 8082 

前端工程请求 8082,nginx 收到请求再转发到实际服务,取得数据,并最终再返回。

(nginx 所在服务器也就是代理服务器,可以和后端服务器为同一主机)

在 nginx 配置文件中设置为:

端口占用情况如下:红框是 nginx 、黄框是前端工程、蓝框是后端工程。

PS: springboot 项目中过滤器使用方法见文章:Springboot 项目中过滤器的使用

 

---------------------------------------------------------------------

后记 :解决报错见文章 :springboot&ajax&has been blocked by CORS policy: No 'Access-Control-Allow-Origin

另报错:The 'Access-Control-Allow-Origin' header contains multiple values'x, *', but only one is allowed.的解决方式见文章:

解决:The 'Access-Control-Allow-Origin' header contains multiple values'x, *', but only one is allowed.

---------------------------------------------------------------------

补记:

2019.5.16

作了以上配置后出现情况:跨域问题时好时不好,最后在 nginx 代理中加了一个假性集群配置:

这样,请求后端成功。访问正常。此处的 ergouzi 只是 upstream 的名字。

事实上后端工程项目只部署在 8089 上,其实 8082 上什么也没有。

---------------------------------------------------------------------

补记:

2019.6.5

其实不用配置假性集群,之所以会出现上面时好时不好情况的原因仅是由于我队友当时的操作:

他也用我服务器,那段时间有时会重启他应用的服务,而当他重启之前会执行命令:

ps -ef | grep java | awk '{print $2}' | xargs kill -9

查出当前运行的所有java程序再一并 kill ,

这样我的服务也挂了,而我只注意到前端工程请求失败,并未去查看后端工程服务是否正常。

好吧 ,这个我也应该检讨自己太粗心 ...

 

参考:https://blog.csdn.net/qq_39403545/article/details/82116121 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/448171.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue 设置全局变量、指定请求的 baseurl

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 安装 axios&#xff1a; npm install axios --save-dev 2. 新建一个 Base.vue 文件&#xff0c;书写内容如下&#xff1a; <sc…

JAXP进行DOM和SAX解析

1.常用XML的解析方式&#xff1a;DOM和SAX 1&#xff09;DOM思想&#xff1a;将整个XML加载内存中&#xff0c;形成文档对象&#xff0c;所以对XML操作都对内存中文档对象进行。 2&#xff09;SAX思想&#xff1a;一边解析&#xff0c;一边处理&#xff0c;一边释放内存资源---…

VScode 格式化代码快捷键、修改快捷键

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 请看仔细快捷键是&#xff1a; shift alt F // 我是从 eclipse 转的 idea &#xff0c;现在再用 vscode , 一直条件反射的按的 c…

TCP报文格式详解

TCP协议只定义了一种报文格式 建立、拆除连接、传输数据使用同样的报文 TCP报文格式 TCP报文段首部&#xff08;20个字节&#xff09; 源端口和目的端口&#xff1a;各占2个字节&#xff0c;16比特的端口号加上32比特的IP地址&#xff0c;共同构成相当于传输层服务访问点的地址…

Vue 生命周期中 mounted( ) 和 created( ) 的区别

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 一、什么是生命周期&#xff1f; 用通俗的语言来说&#xff0c;就是Vue中实例或者组件从创建到消灭中间经过的一系列过程。虽然不太严谨…

基于java的数据结构学习——数组实现的栈以及简单应用

栈 Stack 栈是一种线性结构相比数组&#xff0c;栈对应的操作是数组的子集只能从一端添加元素&#xff0c;也只能从一端取出元素这一端称为栈顶栈是一种后进先出的数据结构 栈的应用 无处不在的Undo操作&#xff08;撤销&#xff09;括号匹配&#xff08;编译器&#xff09;程…

2013驾考科目三考试难点解析

原来规定科目三考试上车准备、起步、直线行驶等13个道路驾驶技能项目。123号令实施后&#xff0c;科目三考试分两部分。道路驾驶技能考试项目增加到16项&#xff0c;增加了加减挡位操作、路口左转弯、路口右转弯3个考试项目&#xff0c;驾驶里程也增加。如何顺利通过2013驾考科…

基于java的数据结构学习——数组实现的队列和循环队列及性能对比

队列 Queue 队列也是一种线性结构相比数组&#xff0c;队列对应的操作是数组的子集只能从一端&#xff08;队尾&#xff09;添加元素&#xff0c;只能从另一端&#xff08;队首&#xff09;取出元素队列是一种先进先出的数据结构 队列的实现及复杂度分析 Queue<E> voi…

新手如何准确的控制油门

日常练车还不赖&#xff0c;可是一换车就容易加大油门儿&#xff0c;有啥子办法能美好的扼制油呢?和调的坐位有关系吗? 答&#xff1a;油门儿跟刹车被视为交通工具扼制的魂灵。交通工具引擎发动机的油门儿&#xff0c;通常是靠踏板来扼制的&#xff0c;也称加速踏板&#xff…

vue 项目:文件夹 结构 、配置详解

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 项目配置 首先&#xff0c;在确定好使用的框架和组件库后&#xff0c;先要大致了解它们&#xff0c;做到文档基本熟悉。本次开发使用…

DIV 半透明层、 CSS实现网页 背景半透明

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 DIV半透明实现&#xff0c;使用CSS实现DIV成半透明效果&#xff0c;CSS实现层与背景半透明效果。 一、DIV CSS半透明基础介绍 - …

加速时如何换挡

加速时如何换挡&#xff0c;您知道吗?为了使换挡过程顺利进行&#xff0c;变速器内齿轮平稳啮合&#xff0c;必须掌握好发动机转速&#xff0c;在适当时机推动变速杆操纵齿轮啮合。为此&#xff0c;要通过反复练习&#xff0c;一边踩踏油门踏板&#xff0c;一边听发动机运转声…

vue 项目 引用(外部) js、css

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 我的工程结构&#xff1a; 1. 引入 css 有 2 种方式&#xff1a; 方式 1 <script type"text/javascript">import .…

自动挡车挡位的基本知识介绍

一般来说&#xff0c;自动档汽车的自动变速器的档位分为P、R、N、D、2 (或S)、L(或1)等。下面分别详细介绍如下&#xff1a; P (Parking) 停车档&#xff0c;或称泊车档&#xff1a; P用作停车之用&#xff0c;它是利用机械装置去锁紧汽车的转动部分&#xff0c;使汽车不能移动…

解决:(iptables failed: iptables --wait -t nat -A DOCKER -p tcp -d 0/0 --dport 8082 -j DNAT --to-destin

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 用 docker 部署一个前端工程&#xff0c;run 后容器有了&#xff0c;却不是运行状态&#xff0c;是创建状态&#xff0c;于是我执行 …

无损压缩——Huffman编码

最近项目中涉及到人脸关键点中神经网络的压缩&#xff0c;采用了性能较好的哈夫曼编码进行。 源码地址&#xff1a;https://github.com/believeszw/HuffmanCompress 1 引言 哈夫曼&#xff08;Huffman&#xff09;编码算法是基于二叉树构建编码压缩结构的&#xff0c;它是数据…

26条安全开车经验 开车20年老司机分享

总有些人&#xff0c;觉得自己开车技术比舒马赫牛叉&#xff0c;市区高速漂移无比潇洒。也总有些人&#xff0c;觉得路是自家的铺的&#xff0c;爱怎么开就怎么开&#xff0c;爱停哪就停哪&#xff0c;哪个不服打开车窗就是一句国骂一个中指。其实他们都没有意识到&#xff0c;…

解决:Request header field Content-Type is not allowed by Access-Control-Allow-Headers

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 前端 vue 工程 post 请求后端接口&#xff0c;报错&#xff1a; Request header field Content-Type is not allowed by Access-Con…

书写README的各种markdown语法

README 该文件用来测试和展示书写README的各种markdown语法。GitHub的markdown语法在标准的markdown语法基础上做了扩充&#xff0c;称之为GitHub Flavored Markdown。简称GFM&#xff0c;GFM在GitHub上有广泛应用&#xff0c;除了README文件外&#xff0c;issues和wiki均支持…

Apache2.4配置ssl

1》验站 如下截图&#xff0c;验站就是在DNS域名商哪里&#xff0c;在对应host下面&#xff0c;添加一个TXT记录类型&#xff0c;主机记录&#xff0c;记录值后&#xff0c;检测即可。   2》SSL证书申请 阿里云&#xff0c;腾讯云有很多免费证书申请&#xff0c;免费的缺点是…