跨域问题(CORS / Access-Control-Allow-Origin)

跨域问题(CORS / Access-Control-Allow-Origin)1、前言最近在项目中,调用EurekaREST接口时,出现了CORS跨越问题(Cross-originresourcesharing),在此与大家进行分享,避免多走些弯路。项目前端(http://localhost:9000)通过Ajax方式调用EurekaREST接口(http://localhost:8761/eureka/apps)时,却没有任何反应…

大家好,又见面了,我是你们的朋友全栈君。

1、前言

      最近在项目中,调用Eureka REST接口时,出现了CORS跨越问题(Cross-origin resource sharing),在此与大家进行分享,避免多走些弯路。

      项目前端(http://localhost:9000)通过Ajax方式调用Eureka REST 接口(http://localhost:8761/eureka/apps)时,却没有任何反应,则通过F12查看日志发现出现“Access-Control-Allow-Origin“类 异常,详细如下:

…… http://localhost:8761/eureka/apps. Origin http://localhost:9000 is not allowed by Access-Control-Allow-Origin……

通过google,发现是由于CORS跨越问题造成的,解决办法无非有两种方式:响应头添加参数和添加过滤器,下面就详细说说CORS跨越问题的起因与详细解决办法。

2、CORS

     CORS,常被大家称之为跨越问题,准确的叫法是跨域资源共享(CORS,Cross-origin resource sharing),是W3C标准,是一种机制,它使用额外的HTTP头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域端口请求一个资源时,资源会发起一个跨域 HTTP 请求

     http://localhost:9000请求http://localhost:8761/eureka/apps就是违背了上述原则,即:请求服务器不同端口的另一个资源,出于安全原因,浏览器限制发起的跨源HTTP请求,则会出现本文开头提到的现象及异常。

     例如,XMLHttpRequest和Fetch API遵循同源策略, 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源,除非使用CORS头。

      跨域资源共享( CORS )机制允许 Web 应用服务器进行跨域访问控制,从而使跨域数据传输得以安全进行。浏览器支持在 API 容器中(例如 XMLHttpRequest 或 Fetch )使用 CORS,以降低跨域 HTTP 请求所带来的风险。


什么情况下存在跨域问题

  • 本文提到的由 XMLHttpRequest 或 Fetch 发起的跨域 HTTP 请求。
  • Web 字体 (CSS 中通过 @font-face 使用跨域字体资源),,因此,网站就可以发布 TrueType 字体资源,并只允许已授权网站进行跨站调用。
  • WebGL 贴图。
  • 使用 drawImage 将 Images/video 画面绘制到 canvas
  • 样式表(使用 CSSOM)。

 

面对CORS的限制,将如何解决呢

     世间万物完事,有因必有果,有果必有因。当然CORS的限制,官方也是给出了解决办法的。

     CORS标准新增了一组 HTTP 头字段(Access-Control-Allow-Origin),允许服务器声明哪些源通过浏览器有权限访问哪些资源。另外,规范要求,对那些可能对服务器数据产生副作用的 HTTP 请求方法(特别是 GET以外的 HTTP 请求,或者搭配某些 MIME 类型的 POST请求),浏览器必须首先使用 OPTIONS 方法发起一个预检请求(preflight request),从而获知服务端是否允许该跨域请求。服务器确认允许之后,才发起实际的 HTTP 请求。在预检请求的返回中,服务器端也可以通知客户端,是否需要携带身份凭证(包括Cookies 和 HTTP 认证相关数据)。

      CORS请求失败会产生错误,但是为了安全,在JavaScript代码层面是无法获知到底具体是哪里出了问题。你只能查看浏览器的控制台以得知具体是哪里出现了错误。

如果有兴趣了解该机制剖析的可以参考https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

3、解决办法

      在查阅大量资源,并了解过CORS机制后,解决办法实质必定会围绕Access-Control-Allow-Origin头。

跨域问题(CORS / Access-Control-Allow-Origin)

跨域问题(CORS / Access-Control-Allow-Origin)

解决办法如下:

添加响应头

     在被请求资源中添加响应头信息”Access-Control-Allow-Origin:*

过滤器

    在本项目中添加如下过滤器:

/**
 * 解决跨域问题
 */
public class AccessControlAllowOriginFilter implements Filter {

    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Allow-Credentials", "true");

     chain.doFilter(req, response);
   } 

   public void init(FilterConfig filterConfig) {

   } 

   public void destroy() {

   } 

}

注解方式

      在Spring Boot中拥有大量的注解,针对跨域问题,也提供了对应的注解@CrossOrigin,使用方法如下:

import java.util.HashMap;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

/**
 * @author xcbeyond
 */
@RestController
@RequestMapping(value = "/api", method = RequestMethod.POST)
public class DemoController {
        
    @CrossOrigin(origins = "*")
    @RequestMapping(value = "/get")
    public String get() {
        ……
    }
}

 个人比较推荐使用上述的三种方式之一,其他方式请自己百度、谷歌吧

跨域问题(CORS / Access-Control-Allow-Origin)

 

 

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/134633.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 茂名高端碳项目什么时候完建_茂名石化对茂名的影响

    茂名高端碳项目什么时候完建_茂名石化对茂名的影响去年茂南区新引进1000万元以上项目26个,协议投资金额91.15亿元,其中茂南石化园区2020年产值突破百亿大关。近日,茂南区集中开工了5个重大项目,总投资19.8亿元,年度计划投资1.6亿元,涉及石油化工、环保能源、仓储物流、现代农业等多个领域。茂南区第一季度重大工程集中开工的5个项目包括,茂名天源石化有限公司建设的碳三碳四资源利用项目投资总额达18亿元,还有总投资6100万元的茂名市炳昊环境科技有限公司年处理处置5万吨废矿物油等含油废物综合利用绿色环保建设项目,另外总投资6000万元的茂名市德旺农

  • 基本稳压电路

    基本稳压电路经过整流后的电源具有较大的电压纹波,单靠调节滤波电容不能明显改善输出电源纹波特性,因此需要采用稳压电路来减小输出电源的纹波。若直将稳压管接至负载输出,则稳压管的工作特性受负载影响较大,甚至会出现不能正常工作的情况。采用下图所示的稳压电路则能保证稳压管始终能够正常工作。其核心思想仍然是负反馈。运放正输入端采用稳压管提供一个相对稳定的基准电压,并通过同相放大在输出端得到一个稳定的输出电压。而由于运放具有一定的电源抑制比,所以在供电电压在一定范围波动时,其仍可正常工作。同向比例运放的输出电流有限,故采用了

  • 重建二叉树 python_Python实现重建二叉树的三种方法详解

    重建二叉树 python_Python实现重建二叉树的三种方法详解本文实例讲述了Python实现重建二叉树的三种方法。分享给大家供大家参考,具体如下:学习算法中,探寻重建二叉树的方法:用input前序遍历顺序输入字符重建前序遍历顺序字符串递归解析重建前序遍历顺序字符串堆栈解析重建如果懒得去看后面的内容,可以直接点击此处本站下载完整实例代码。思路学习算法中,python算法方面的资料相对较少,二叉树解析重建更少,只能摸着石头过河。通过不同方式遍历二叉树,可以得…

  • du 使用详解 linux统计目录大小并排序 查看目录下所有一级子目录文件夹大小

    du 使用详解 linux统计目录大小并排序 查看目录下所有一级子目录文件夹大小

    2021年11月22日
  • spring cloud熔断器原理_a股熔断机制是什么时候

    spring cloud熔断器原理_a股熔断机制是什么时候1.熔断机制介绍在介绍熔断机制之前,我们需要了解微服务的雪崩效应。在微服务架构中,微服务是完成一个单一的业务功能,这样做的好处是可以做到解耦,每个微服务可以独立演进。但是,一个应用可能会有多个微服务组成,微服务之间的数据交互通过远程过程调用完成。这就带来一个问题,假设微服务A调用微服务B和微服务C,微服务B和微服务C又调用其它的微服务,这就是所谓的“扇出”。如果扇出的链路上某个微服务的调用响应时…

    2022年10月31日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号