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

最新推荐文章于 2024-08-14 08:15:00 发布

echo 云清

最新推荐文章于 2024-08-14 08:15:00 发布

阅读量120

点赞数

分类专栏： # Gtaeway 文章标签： gateway okhttp 跨域 Ajax

本文链接：https://blog.csdn.net/qq_57005976/article/details/134969667

版权

Gtaeway 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

跨域问题

详情参考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 # 是否允许携带cookie
            maxAge: 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=admin
  axios.get("http://localhost:10010/user/1?authorization=admin")
  .then(resp => console.log(resp.data))
  .catch(err => console.log(err))
</script>
</html>