Ajax跨域请求怎么解决？CORS与JSONP最佳实践详解

在Web开发中，解决Ajax跨域请求的核心上文小编总结是：浏览器出于安全考虑实施了同源策略，而解决这一限制的最佳实践并非仅依赖后端配置，而是结合Nginx反向代理、CORS（跨域资源共享）标准头以及JSONP（针对老旧浏览器）等多种技术手段，CORS是现代Web应用的首选方案，它通过HTTP响应头明确告知浏览器哪些源被允许访问资源,既保证了安全性又实现了数据的自由流通。

深入理解同源策略与跨域本质

要解决跨域问题，首先必须明确“跨域”的定义，同源策略要求协议、域名和端口三者完全一致，只要其中任何一项不同，浏览器就会拦截跨域请求，这并非服务器端的限制，而是浏览器的安全机制，解决思路主要分为两类：一是让请求看起来是同源的（如通过代理），二是让服务器明确授权该跨域请求（如CORS）。

首选方案：配置CORS响应头

CORS是目前最标准、最推荐的跨域解决方案，它通过在服务器端设置特定的HTTP响应头,告诉浏览器当前请求是被允许的。

1. Access-Control-Allow-Origin：这是最关键的头部，它可以设置为具体的域名（如 https://example.com），也可以设置为 表示允许所有源访问，但在涉及身份验证（如携带Cookie）时，严禁使用 ，必须指定具体的源，并将 Access-Control-Allow-Credentials 设置为 true。
2. Access-Control-Allow-Methods：定义允许的HTTP方法，如 GET, POST, PUT, DELETE 等。
3. Access-Control-Allow-Headers：定义允许的自定义请求头，Content-Type 为 application/json 时,通常需要显式声明允许该头部。

对于使用Node.js（Express/Koa）或Java（Spring Boot）的后端服务，只需在中间件或过滤器中注入这些头部即可，在Express中可以使用 cors 中间件快速实现；在Spring Boot中可以使用 @CrossOrigin 注解或全局配置类。

进阶方案：Nginx反向代理

在生产环境中，为了隐藏后端接口地址并进一步简化前端代码，使用Nginx进行反向代理是极佳的选择，通过配置Nginx，可以将前端的API请求映射到后端服务器，对浏览器而言，这属于同源请求,从而彻底规避跨域问题。

在Nginx配置文件中，利用 proxy_pass 指令将 /api 开头的请求转发到后端服务。

location /api/ {
    proxy_pass http://backend-server:8080/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

这种方式不仅解决了跨域，还提升了安全性，因为前端无法直接看到后端真实的IP和端口，且Nginx可以处理静态资源缓存、负载均衡等额外任务。

兼容方案：JSONP与WebSocket

虽然CORS已成为主流，但在某些极端场景下仍需考虑其他方案，JSONP（JSON with Padding）利用