随着互联网技术的发展，Web应用程序越来越频繁地涉及到跨域资源共享(Cross-Origin Resource Sharing, CORS)的问题。当你的前端应用托管在一个域上，而后端服务运行在另一个域上时，就需要解决跨域问题。在Kubernetes集群中使用Ingress Nginx作为入口网关时，可以通过简单的配置来实现跨域支持。本文将详细介绍如何配置Ingress Nginx来支持跨域请求，并给出一个实际的案例演示。
CORS示图
前后端分离：在现代Web应用中，前端和后端通常部署在不同的服务器或域名上。当前端应用尝试从后端API获取数据时，由于浏览器的同源策略，这种跨域请求可能会被阻止，因此需要CORS来允许这种通信。
单页面应用（SPA）：使用React、Vue或Angular等框架开发的单页面应用，如果API服务部署在不同的域名上，也需要配置CORS。
第三方API集成：当你的网站或应用需要调用部署在其他域名上的第三方API时，例如社交媒体登录、地图服务或数据分析工具，需要CORS来允许这些跨域请求。
资源共享：如果你希望其他网站能够安全地引用你的资源（如图片、样式表、脚本等），你可以在服务器上配置CORS策略来允许特定的外部域访问这些资源。
| 应用分类 | 应用名称 | 应用地址 |
| 前端 | nginx | nginx.jiaxzeng.com |
| 后端 | simple | simple.jiaxzeng.com |
Tip：
前端跨域页面/cors.html
后端有多个api接口，但前端只是使用到/header，/who/hostname两个接口
前端资源
后端资源
前端页面
后端页面
前端点击Button按钮获取值都是弹出报错，是因为浏览器只允许同源访问，当发生跨域时，会出现如上前端页面报错。解决该问题只需要后端ingress上配置允许跨域访问即可。
cat <<'EOF' | kubectl apply -f -
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
annotations:
nginx.ingress.kubernetes.io/cors-allow-methods: "GET, POST, OPTIONS"
nginx.ingress.kubernetes.io/cors-allow-origin: "http://nginx.jiaxzeng.com"
nginx.ingress.kubernetes.io/enable-cors: "true"
name: simple
namespace: default
spec:
ingressClassName: nginx
rules:
- host: simple.jiaxzeng.com
http:
paths:
- backend:
service:
name: simple
port:
number: 8899
path: /
pathType: Prefix
EOF
Tip：
nginx.ingress.kubernetes.io/cors-allow-origin指定域名的话，一定要加上协议名称，允许所有域名用"*"匹配
nginx.ingress.kubernetes.io/cors-allow-methods默认是GET, PUT, POST, DELETE, PATCH, OPTIONS方法
前端页面调用后端服务/header接口
通过合理的配置Ingress Nginx来支持CORS，可以有效地解决跨域问题，使开发者能够更加专注于业务逻辑的开发而不是网络层面的安全策略。希望本篇文章能帮助你在实际项目中更好地理解和应用CORS配置。
别忘了，关注我们的公众号，获取更多关于容器技术和云原生领域的深度洞察和技术实战，让我们携手在技术的海洋中乘风破浪！
