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

2023-12-13 15:16:47

跨域问题

详情参考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>

文章来源:https://blog.csdn.net/qq_57005976/article/details/134969667
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。