使用网关和配置跨域

CV工程湿

已于 2022-01-30 01:12:03 修改

阅读量2k

点赞数 3

分类专栏：笔记文章标签： eureka java spring boot

于 2022-01-30 01:10:56 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45972425/article/details/122749696

版权

笔记专栏收录该内容

57 篇文章

订阅专栏

创建一个Springboot项目

导入两个依赖

 <!-- 服务注册 -->
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-gateway</artifactId>
        </dependency>

yml文件

server:
  port: 80
spring:
  application:
    name: api-gateway
  cloud:
    nacos:
      discovery:
        server-addr: 192.168.200.128:8848
    gateway:
      discovery:      #是否与服务发现组件进行结合，通过 serviceId(必须设置成大写) 转发到具体的服务实例。默认为false，设为true便开启通过服务中心的自动根据 serviceId 创建路由的功能。
        locator:      #路由访问方式：http://Gateway_HOST:Gateway_PORT/大写的serviceId/**，其中微服务应用名默认大写访问。
          enabled: true
      routes:
        - id: service-product
          uri: lb://service-product
          predicates:
            - Path=/*/product/** # 路径匹配

启动类

package com.Zh.gmall.gateway;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

/**
 * @author OZH
 * @Description:
 * @date 2022/1/29 23:52
 */
@SpringBootApplication
public class ServerGatewayApplication {
    public static void main(String[] args) {
        SpringApplication.run(ServerGatewayApplication.class, args);
    }
}

配置跨域

创建一个配置类

代码如下

package com.Zh.gmall.gateway.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;

import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;

/**
 * @author OZH
 * @Description:
 * @date 2022/1/30 0:37
 */
@Configuration //将当前类变为xxx.xml配置类
public class CorsConfig {
    //@Bean 创建一个bean对象交给Spring容器管理
    // <bean class ="org.springframework.web.cors.reactive.CorsWebFilter"/>相当于
    @Bean
    public CorsWebFilter corsWebFilter() {
        //需要CorsConfigurationSource这个对象
//        CorsConfigurationSource  这个对象是一个接口,所以我们需要当前接口的实现类UrlBasedCorsConfigurationSource

        UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedHeader("*");//请求头* 代表任意随便  任意请求头
        corsConfiguration.addAllowedOrigin("*");//请求域* 代表任意,这个可以写*也可以写域名  任意域名
        corsConfiguration.addAllowedMethod("*");//GET,POST,PUT  *表示任意
        corsConfiguration.setAllowCredentials(true);//允许携带cookie
        //第一个参数表示路径,第二个参数表示设置跨域的方式等信息 CorsConfiguration  ,下面这个/**表示当前路径下所有
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);

        //  返回当前对象
        return new CorsWebFilter(urlBasedCorsConfigurationSource);
    }

}

跨域处理

跨域：浏览器对于javascript的同源策略的限制。

以下情况都属于跨域：

跨域原因说明	示例
域名不同	www.jd.com 与 www.taobao.com
域名相同，端口不同	www.jd.com:8080 与 www.jd.com:8081
二级域名不同	item.jd.com 与 miaosha.jd.com

如果域名和端口都相同，但是请求路径不同，不属于跨域，如：

www.jd.com/item

www.jd.com/goods

http和https也属于跨域

而我们刚才是从localhost:1000去访问localhost:8888，这属于端口不同，跨域了。

2.4.4.1 为什么有跨域问题？

跨域不一定都会有跨域问题。

因为跨域问题是浏览器对于ajax请求的一种安全限制：一个页面发起的ajax请求，只能是与当前页域名相同的路径，这能有效的阻止跨站攻击。

因此：跨域问题是针对ajax的一种限制。

但是这却给我们的开发带来了不便，而且在实际生产环境中，肯定会有很多台服务器之间交互，地址和端口都可能不同，怎么办？

2.4.4.2 解决跨域问题的方案

目前比较常用的跨域解决方案有3种：

- Jsonp

最早的解决方案，利用script标签可以跨域的原理实现。

https://www.w3cschool.cn/json/json-jsonp.html

限制：

- 需要服务的支持

- 只能发起GET请求

- nginx反向代理

思路是：利用nginx把跨域反向代理为不跨域，支持各种请求方式

缺点：需要在nginx进行额外配置，语义不清晰

- CORS

规范化的跨域请求解决方案，安全可靠。

优势：

- 在服务端进行控制是否允许跨域，可自定义规则

- 支持各种请求方式

缺点：

- 会产生额外的请求

我们这里会采用cors的跨域方案。

2.4.4.3 什么是cors

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

- 浏览器端：

目前，所有浏览器都支持该功能（IE10以下不行）。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。

- 服务端：

CORS通信与AJAX没有任何差别，因此你不需要改变以前的业务逻辑。只不过，浏览器会在请求中携带一些头信息，我们需要以此判断是否允许其跨域，然后在响应头中加入一些信息即可。这一般通过过滤器完成即可。

2.4.4.4 原理有点复杂

预检请求

跨域请求会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

一个“预检”请求的样板：

OPTIONS /cors HTTP/1.1

Origin: http://localhost:1000

Access-Control-Request-Method: GET

Access-Control-Request-Headers: X-Custom-Header

User-Agent: Mozilla/5.0...

- Origin：会指出当前请求属于哪个域（协议+域名+端口）。服务会根据这个值决定是否允许其跨域。

- Access-Control-Request-Method：接下来会用到的请求方式，比如PUT

- Access-Control-Request-Headers：会额外用到的头信息

预检请求的响应

服务的收到预检请求，如果许可跨域，会发出响应：

HTTP/1.1 200 OK

Date: Mon, 01 Dec 2008 01:15:39 GMT

Server: Apache/2.0.61 (Unix)

Access-Control-Allow-Origin: http://localhost:1000

Access-Control-Allow-Credentials: true

Access-Control-Allow-Methods: GET, POST, PUT

Access-Control-Allow-Headers: X-Custom-Header

Access-Control-Max-Age: 1728000

Content-Type: text/html; charset=utf-8

Content-Encoding: gzip

Content-Length: 0

Keep-Alive: timeout=2, max=100

Connection: Keep-Alive

Content-Type: text/plain

如果服务器允许跨域，需要在返回的响应头中携带下面信息：

- Access-Control-Allow-Origin：可接受的域，是一个具体域名或者*（代表任意域名）

- Access-Control-Allow-Credentials：是否允许携带cookie，默认情况下，cors不会携带cookie，除非这个值是true

- Access-Control-Allow-Methods：允许访问的方式

- Access-Control-Allow-Headers：允许携带的头

- Access-Control-Max-Age：本次许可的有效时长，单位是秒，过期之前的ajax请求就无需再次进行预检了

有关cookie：

要想操作cookie，需要满足3个条件：

- 服务的响应头中需要携带Access-Control-Allow-Credentials并且为true。

- 浏览器发起ajax需要指定withCredentials 为true

分隔符------------------------------------------------------------------------------------------------------------------------

CORS：原理：*****
               a.   预检请求
                       请求：
                           Access-Control-Request-Method: GET
                           Access-Control-Request-Headers: X-Custom-Header
                       响应：
                           - Access-Control-Allow-Origin：可接受的域，是一个具体域名或者*（代表任意域名）
                           - Access-Control-Allow-Credentials：是否允许携带cookie，默认情况下，cors不会携带cookie，除非这个值是true
                           - Access-Control-Allow-Methods：允许访问的方式
                           - Access-Control-Allow-Headers：允许携带的头
                           - Access-Control-Max-Age：本次许可的有效时长，单位是秒，过期之前的ajax请求就无需再次进行预检了

如何使用：我们项目中如何解决跨域问题！
               1.   在后台代码的控制器中添加一个注解：
                       @CrossOrigin
                       当前服务启动的时候，需要注册到nacos 上！通过网关访问后台微服务

               2.   在网关中设置跨域！
                       @Bean
                       public CorsWebFilter corsWebFilter(){

                           // 创建CorsConfiguration
                           CorsConfiguration corsConfiguration = new CorsConfiguration();
                           corsConfiguration.addAllowedHeader("*"); // 任意请求头
                           corsConfiguration.addAllowedOrigin("*"); // 允许任意域名
                           corsConfiguration.addAllowedMethod("*"); // GET, POST, PUT 表示任意
                           corsConfiguration.setAllowCredentials(true);// 允许携带cookie

                           // 需要CorsConfigurationSource 这个对象是一个接口，所以我们需要当前接口的实现类 UrlBasedCorsConfigurationSource
                           UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
                           // 第一个参数表示路径，第二个参数表示设置跨域的方式等信息 CorsConfiguration
                           urlBasedCorsConfigurationSource.registerCorsConfiguration("/**",corsConfiguration);

                           // 返回当前对象
                           return new CorsWebFilter(urlBasedCorsConfigurationSource);
                       }

                       测试：能否正常访问后台微服务数据！

                       推荐使用在网关中配置跨域！做全局配置！