04-Gateway网关中跨域问题的解决方案

跨域问题

详情参考Ajax请求的跨域问题处理方案

`CORS方案`

CORS是W3C标准全称是跨域资源共享(Cross-origin resource sharing),它允许浏览器向跨源服务器发出XMLHttpRequest请求从而克服了AJAX只能同源使用的限制

第一步: 在gateway模块的application.yml文件中添加允许跨域请求的全局配置

spring:cloud:gateway:globalcors: # 全局的跨域处理add-to-simple-url-handler-mapping: true # 解决options请求被拦截问题(浏览器询问服务器发起的是options请求)corsConfigurations:'[/**]': # 拦截进入网关的哪些请求allowedOrigins: # 允许哪些网站的跨域请求 - "http://localhost:5500"allowedMethods: # 允许跨域请求的请求方式- "GET"- "POST"- "DELETE"- "PUT"- "OPTIONS"allowedHeaders: "*" # 允许在请求中携带的头信息allowCredentials: true # 是否允许携带cookiemaxAge: 360000 # 这次跨域检测的有效期,在有效期内的跨域ajax请求可以直接放行,减轻服务器的压力

第二步: 在Vs Code中内置的服务器(默认是5500端口)访问index.html页面发起跨域的Ajax请求,然后在控制台查看响应的数据

<!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>// http://localhost:5500/index.html-->http://localhost:10010/user/1?authorization=adminaxios.get("http://localhost:10010/user/1?authorization=admin").then(resp => console.log(resp.data)).catch(err => console.log(err))
</script>
</html>