概述
跨域:域名不一致就是跨域,主要包括:
- 域名不同: 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>
就这样访问,在浏览器控制台会报错:
因为我们没有在网关中配置允许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 #这次跨域检测的有效期
可以看到,请求成功:
总结
CORS跨域要配置的参数包括哪几个?
- 允许哪些域名跨域
- 允许哪些请求头
- 允许哪些请求方式
- 是否允许使用cookie
- 有效期是多久