gateway网关与前端请求跨域问题的解决方案

gateway网关与前端请求的跨域问题

最近因项目需要,引入了gateway网关。可是发现将前端请求的端口指向网关后,用postman发送请求是正常的,用浏览器页面点击请求会出现跨域问题。今天就记录一下自己是怎么解决的。

第一种

直接在yml文件中配置

spring:
  application:
    name: service-getway
  cloud:
    gateway:
      globalcors:
        cors-configurations:
          '[/**]':
            # 允许携带认证信息
            # 允许跨域的源(网站域名/ip),设置*为全部
            # 允许跨域请求里的head字段,设置*为全部
            # 允许跨域的method, 默认为GET和OPTIONS,设置*为全部
            # 跨域允许的有效期
            allow-credentials: true
            allowed-originPatterns: "*"
            allowed-headers: "*"
            allowed-methods:
              - OPTIONS
              - GET
              - POST
            max-age: 3600

允许跨域的源(网站域名/ip),设置*为全部,也可以指定ip或者域名。

第二种

写一个WebCrossFilter过滤器实现Filter,在doFilter方法中这样编写

public void doFilter(ServletRequest request, ServletResponse response, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse res = (HttpServletResponse)response;
        HttpServletRequest req = (HttpServletRequest)request;
        res.setHeader("Access-Control-Allow-Origin", req.getHeader("Origin"));
        res.setHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS,PUT,DELETE");
        res.setHeader("Access-Control-Max-Age", "3600");
        res.setHeader("Access-Control-Allow-Headers", req.getHeader("Access-Control-Request-Headers"));
        res.setHeader("Access-Control-Allow-Credentials", "true");
        if (req.getMethod().equals(RequestMethod.OPTIONS.name())) {
            res.setStatus(HttpStatus.OK.value());
        } else {
            filterChain.doFilter(request, response);
        }
    }

再然后在编写一个配置类

@Configuration
public class WebFilterConfig {
    @Bean
    public FilterRegistrationBean webCrossFilterRegistration() {
        FilterRegistrationBean registration = new FilterRegistrationBean();
        registration.setFilter(new WebCrossFilter());
        registration.addUrlPatterns("/**");
        registration.addInitParameter("paramName", "paramValue");
        registration.setName("webCrossFilter");
        return registration;
    }
}

将WebCrossFilter注册到spring容器中,这样就解决了跨域问题。

建议在网关写了cross后,服务就不需要再写了。

gateway网关统一解决跨域

网上有很多种解决跨域问题的,只有这种用起来最简单。

通过修改配置文件的方式来解决

只需要在 application.yml 配置文件中添加红色框的配置:

spring:
  application:
    name: app-gateway
  cloud:
    nacos:
      discovery:
        server-addr: localhost:8848
    gateway:
      globalcors:
        corsConfigurations:
          '[/**]':
            allowedHeaders: "*"
            allowedOrigins: "*"
            allowCredentials: true
            allowedMethods:
              - GET
              - POST
              - DELETE
              - PUT
              - OPTION

最后需要注意一点,既然是在网关里边来解决跨域问题的,就不能在下流的服务里边再重复引入解决跨域的配置了。

否则会导致跨域失效,报跨域的问题。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • spring cloud实现前端跨域问题的解决方案

    当我们需要将spring boot以restful接口的方式对外提供服务的时候,如果此时架构是前后端分离的,那么就会涉及到跨域的问题,那怎么来解决跨域的问题了,下面就来探讨下这个问题. 解决方案一:在Controller上添加@CrossOrigin注解 使用方式如下: @CrossOrigin // 注解方式 @RestController public class HandlerScanController { @CrossOrigin(allowCredentials="true"

  • spring boot配合前端实现跨域请求访问

    一.方法: 服务端设置Respone Header头中Access-Control-Allow-Origin 配合前台使用jsonp 继承WebMvcConfigurerAdapter 添加配置类 二.实例: 1.前端:因为我们用了前后端分离,前端用node服务器,node服务器再用了ajax反向代理请求到我的spring boot 服务器.其中node服务器也用了ajax发出请求所以也存在跨域的问题.具体代码: app.all(apiRoot + '/*', proxy('127.0.0.1:

  • SpringCloud zuul 网关如何解决跨域问题

    跨域 在SpringCloud中 zuul 和springboot 要同时配置才能实现网关处理跨域 解决Access to XMLHttpRequest at 'http://192.168.2.173:8001/energy-base/groupType/getPageByType?timestamp=1557886425725' from origin 'http://localhost:3000' has been blocked by CORS policy: The 'Access-C

  • spring cloud gateway请求跨域问题解决方案

    这篇文章主要介绍了spring cloud gateway请求跨域问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 @Configuration public class CorsConfig implements GlobalFilter, Ordered { private static final String ALL = "*"; private static final String MAX_AGE =

  • gateway网关与前端请求跨域问题的解决方案

    gateway网关与前端请求的跨域问题 最近因项目需要,引入了gateway网关.可是发现将前端请求的端口指向网关后,用postman发送请求是正常的,用浏览器页面点击请求会出现跨域问题.今天就记录一下自己是怎么解决的. 第一种 直接在yml文件中配置 spring: application: name: service-getway cloud: gateway: globalcors: cors-configurations: '[/**]': # 允许携带认证信息 # 允许跨域的源(网站域

  • 前端常见跨域解决方案(全)

    什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 广义的跨域: 1.) 资源跳转: A链接.重定向.表单提交 2.) 资源嵌入: <link>.<script>.<img>.<frame>等dom标签,还有样式中background:url().@font-face()等文件外链 3.) 脚本请求: js发起的ajax请求.dom和js对象的跨域操作等 其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场

  • js前端解决跨域问题的8种方案(最新最全)

    1.同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.js http://www.a.com/b.js 同一域名,不同端口 不允许 http://www.a.com/a.js https://www.a.com/b

  • vue使用代理解决请求跨域问题详解

    在日常开发中,我们前端必不可少的需要像后端请求数据. 但是一般前后端分离,所以域名.端口等肯定不尽相同,这样就不可避免的会遇到浏览器的同源策略限制. 在一般情况下,后端都会设置请求跨域允许的来源.方法等. 但是也保不准后端疏忽而忘记这个问题. 那为了不影响我们的开发,前端只能被动的去找后端解决跨域问题. 其实,我们前端也可以解决跨域问题,那就是使用代理. 举个例子: 我请求的地址是这个:http://192.168.12.36:9000/api/SourceManager 但是我本地的vue项目

  • Vue axios与Go Frame后端框架的Options请求跨域问题详解

    跨域问题可从前后两端分开排查: 前端:Vue + axios axios 请求头使用 'Content-Type': 'application/json', 并且在Header中设置了 Authorization 字段用于传递 Token, 参数未经 Qs 转码, 使用以下代码测试登录接口: // 为方便操作,已将 axios 实例挂载到 this.$axios 上 this.$axios.post('/signin', {account: '', password: ''}) .then(re

  • js前端解决跨域的八种实现方案

    由于同源策略的限制,满足同源的脚本才可以获取资源.虽然这样有助于保障网络安全,但另一方面也限制了资源的使用. 那么如何实现跨域呢,以下是实现跨域的一些方法. 一.jsonp跨域 原理:script标签引入js文件不受跨域影响.不仅如此,带src属性的标签都不受同源策略的影响. 正是基于这个特性,我们通过script标签的src属性加载资源,数据放在src属性指向的服务器上,使用json格式. 由于我们无法判断script的src的加载状态,并不知道数据有没有获取完成,所以事先会定义好处理函数.服

  • 解决vue $http的get和post请求跨域问题

    vue $http的get和post请求跨域问题 首先在config/index.js中配置proxyTable proxyTable: { '/api':{ // target:'http://jsonplaceholder.typicode.com', target:'http://localhost:9080', changeOrigin:true, pathRewrite:{ '/api':'' } } 用户名和密码登录的表单提交 methods: { // get请求 // submi

  • 使用Filter拦截器如何实现请求跨域转发

    目录 Filter拦截器实现请求跨域转发 在使用Filter实现转发后特做一次记录 使用filter解决跨域 在web.xml配置拦截器 过滤器代码 Filter拦截器实现请求跨域转发 因为公司项目需求,项目中前端请求需要通过一个类似中转的服务转发(请求在该服务中会重新包装一些通用参数) 在使用Filter实现转发后特做一次记录 package com.unicloud.cce.Filter; import com.alibaba.fastjson.JSON; import com.uniclo

  • vue中前端代理跨域问题实例总结

    目录 前言 第一 第二 第三 代码 总结 前言 这几天在学习vue进行前后端交互时出现了跨域问题,也是经历查文章查文档和自己实践总结才最终解决.这篇文章就对此进行总结,以防忘记,同时也希望能对正在经历该问题困扰的同学们有所帮助.注意:这里讲解的是vue2.x版本的方法! 第一 首先我们需要先确定我们所使用的接口名,我这里使用的自己Java后端的接口和python后端的接口 http://localhost:8081/articles/findArticlePagehttp://127.0.0.1

随机推荐