快捷導(dǎo)航

gateway網(wǎng)關(guān)與前端請(qǐng)求跨域問(wèn)題的解決方案

更新時(shí)間：2021年07月15日 14:03:38 作者：錦瑟思年華

這篇文章主要介紹了gateway網(wǎng)關(guān)與前端請(qǐng)求跨域問(wèn)題的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

gateway網(wǎng)關(guān)與前端請(qǐng)求的跨域問(wèn)題

最近因項(xiàng)目需要，引入了gateway網(wǎng)關(guān)?？墒前l(fā)現(xiàn)將前端請(qǐng)求的端口指向網(wǎng)關(guān)后，用postman發(fā)送請(qǐng)求是正常的，用瀏覽器頁(yè)面點(diǎn)擊請(qǐng)求會(huì)出現(xiàn)跨域問(wèn)題。今天就記錄一下自己是怎么解決的。

第一種

直接在yml文件中配置

spring:
  application:
    name: service-getway
  cloud:
    gateway:
      globalcors:
        cors-configurations:
          '[/**]':
            # 允許攜帶認(rèn)證信息
            # 允許跨域的源(網(wǎng)站域名/ip)，設(shè)置*為全部
            # 允許跨域請(qǐng)求里的head字段，設(shè)置*為全部
            # 允許跨域的method， 默認(rèn)為GET和OPTIONS，設(shè)置*為全部
            # 跨域允許的有效期
            allow-credentials: true
            allowed-originPatterns: "*"
            allowed-headers: "*"
            allowed-methods:
              - OPTIONS
              - GET
              - POST
            max-age: 3600

允許跨域的源(網(wǎng)站域名/ip)，設(shè)置*為全部，也可以指定ip或者域名。

第二種

寫(xiě)一個(gè)WebCrossFilter過(guò)濾器實(shí)現(xiàn)Filter，在doFilter方法中這樣編寫(xiě)

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);
        }
    }

再然后在編寫(xiě)一個(gè)配置類(lèi)

@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注冊(cè)到spring容器中，這樣就解決了跨域問(wèn)題。

建議在網(wǎng)關(guān)寫(xiě)了cross后，服務(wù)就不需要再寫(xiě)了。

gateway網(wǎng)關(guān)統(tǒng)一解決跨域

網(wǎng)上有很多種解決跨域問(wèn)題的，只有這種用起來(lái)最簡(jiǎn)單。

通過(guò)修改配置文件的方式來(lái)解決

只需要在 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

最后需要注意一點(diǎn)，既然是在網(wǎng)關(guān)里邊來(lái)解決跨域問(wèn)題的，就不能在下流的服務(wù)里邊再重復(fù)引入解決跨域的配置了。

否則會(huì)導(dǎo)致跨域失效，報(bào)跨域的問(wèn)題。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: