概述

跨域：域名不一致就是跨域，主要包括：

  • 域名不同： www.taobao.com 和 www.taobao.org 和 www.jd.com 和 miaosha.jd.com
  • 域名相同，端口不同：localhost:8080和localhost8081
    跨域问题：浏览器禁止请求的发起者与服务端发生跨域ajax请求，请求被浏览器拦截的问题
    解决方案：CORS

实践

在gateway的application.yml中配置

server:
  port: 10010
spring:
  application:
    name: gateway
  cloud:
    nacos:
      server-addr: localhost:8848
    gateway:
      routes:
        - id: user-service #路由表示，必须唯一
          uri: lb://userservice # 路由的目标地址
          predicates:
            - Path=/user/** #路径判断，判断路径是否是以/user开头，如果是则符合
        - id: order-service #路由表示，必须唯一
          uri: lb://orderservice # 路由的目标地址
          predicates:
            - Path=/order/** #路径判断，判断路径是否是以/user开头，如果是则符合
      globalcors: #全局跨域处理
        add-to-simple-url-handler-mapping: true #解决options被拦截的问题
        cors-configurations:
          '[/**]':
            allowedOrigins: #允许哪些网站的跨域访问
              - "http://www.taobao.com"
              - "http://www.baidu.com"
            allowedMethods: #允许的跨域请求方式
              - "GET"
              - "POST"
              - "DELETE"
              -  "PUT"
              - "OPTIONS"
            allowedHeaders: "*" #允许在请求中携带头信息
            allowCredentials: true #是否允许携带cookie
            maxAge: 360000 #这次跨域检测的有效期

测试

存在界面index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<pre>
测试跨域访问
</pre>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  axios.get("http://localhost:10010/user/1?authorization=admin")
  .then(resp => console.log(resp.data))
  .catch(err => console.log(err))
</script>
</html>

就这样访问，在浏览器控制台会报错：

image-1655627227996

因为我们没有在网关中配置允许http://127.0.0.1:5000来访问，

更新配置文件：

server:
  port: 10010
spring:
  application:
    name: gateway
  cloud:
    nacos:
      server-addr: localhost:8848
    gateway:
      routes:
        - id: user-service #路由表示，必须唯一
          uri: lb://userservice # 路由的目标地址
          predicates:
            - Path=/user/** #路径判断，判断路径是否是以/user开头，如果是则符合
        - id: order-service #路由表示，必须唯一
          uri: lb://orderservice # 路由的目标地址
          predicates:
            - Path=/order/** #路径判断，判断路径是否是以/user开头，如果是则符合
      globalcors: #全局跨域处理
        add-to-simple-url-handler-mapping: true #解决options被拦截的问题
        cors-configurations:
          '[/**]':
            allowedOrigins: #允许哪些网站的跨域访问
              - "http://www.taobao.com"
              - "http://www.baidu.com"
              - "http://127.0.0.1:5000"
            allowedMethods: #允许的跨域请求方式
              - "GET"
              - "POST"
              - "DELETE"
              -  "PUT"
              - "OPTIONS"
            allowedHeaders: "*" #允许在请求中携带头信息
            allowCredentials: true #是否允许携带cookie
            maxAge: 360000 #这次跨域检测的有效期

可以看到，请求成功：
image-1655627354520

总结

CORS跨域要配置的参数包括哪几个？

  • 允许哪些域名跨域
  • 允许哪些请求头
  • 允许哪些请求方式
  • 是否允许使用cookie
  • 有效期是多久