クロスドメインの問題
詳細については、Ajax リクエストのクロスドメイン問題処理ソリューションを参照してください。
CORS方案
CORS は、W3C 標準 跨域资源共享 (クロスオリジン リソース共有) の正式名です。これにより、ブラウザがクロスオリジン サーバーに XMLHttpRequest リクエストを発行できるようになり、AJAX の制限が克服されます。同じオリジンからのみ使用できます。
ステップ 1: クロスドメイン リクエストを許可するグローバル設定を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请求可以直接放行,减轻服务器的压力
ステップ 2: Vs Code の組み込みサーバーにアクセスする (デフォルト ポート 5500)index.htmlページはクロスドメイン Ajax リクエストを開始し、コンソールに応答データを表示します。 a>
<!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>