JQuery 的 ajax 出现Origin null is not allowed by Access-Control-Allow-Origin：全面解决办法
2023-09-19 18:11:00
如何解决 AJAX 跨域请求中 "Origin null is not allowed by Access-Control-Allow-Origin" 错误
在使用 jQuery 发起 AJAX 跨域请求时，您可能会遇到 "Origin null is not allowed by Access-Control-Allow-Origin" 错误。这是由于浏览器的同源策略限制，该策略要求请求的来源与页面来源相同。当服务器未正确配置 CORS（跨域资源共享）时，就会触发此错误。
什么是 CORS？
CORS 是一种机制，允许跨域请求，即从一个源（域名、端口和协议）向另一个源发送 HTTP 请求。通过在服务器响应中设置特定的 CORS 响应头，服务器可以指定哪些域被允许访问其资源。
解决办法
要解决此错误，有几种方法：
1. 服务端配置 CORS
在服务器代码中添加以下代码以允许跨域请求：
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
header('Access-Control-Allow-Headers: Content-Type, Authorization');
Access-Control-Allow-Origin: *允许来自所有域的请求。Access-Control-Allow-Methods指定允许的请求方法（如 GET、POST、PUT、DELETE）。Access-Control-Allow-Headers指定允许的请求头（如 Content-Type、Authorization）。
2. 使用 CORS 代理
如果您无法在服务器端配置 CORS，可以考虑使用 CORS 代理，如 CORS Anywhere 或 CrossOrigin。这些代理充当中介，将跨域请求转发到服务器。
3. JSONP
JSONP（JSON with Padding）是一种利用 <script> 标签实现跨域数据传输的方法。它绕过同源策略，因为脚本不受同源限制。
4. Fetch API
Fetch API 是一个现代的浏览器 API，它支持跨域请求。它提供了一个更简单的语法，并且与 Promises 一起使用。
5. XMLHttpRequest
XMLHttpRequest 是一个古老的浏览器 API，它也支持跨域请求。然而，它比 Fetch API 更复杂，并且不支持 Promises。
6. Axios
Axios 是一个流行的 JavaScript 库，用于发送 HTTP 请求。它支持跨域请求，并提供丰富的配置选项。
常见问题解答
1. 我应该使用哪种方法？
最佳方法取决于您的具体情况。如果您对服务器代码有控制权，建议在服务器端配置 CORS。如果您无法控制服务器代码，可以使用 CORS 代理或 JSONP。
2. 为什么我的 CORS 配置不起作用？
检查响应头以确保已正确设置 CORS 响应头。此外，请确保请求源与您在 CORS 配置中允许的源匹配。
3. JSONP 是否安全？
JSONP 是一种常见的跨域技术，但它可能存在安全漏洞。确保只从可信来源加载 JSONP 回调。
4. Fetch API 和 XMLHttpRequest 有什么区别？
Fetch API 是一个较新的 API，它比 XMLHttpRequest 更简单且支持 Promises。XMLHttpRequest 更复杂，但它在旧浏览器中得到了更好的支持。
5. Axios 的优势是什么？
Axios 是一个轻量级的库，提供了一个简单的接口用于发送 HTTP 请求。它支持跨域请求，并提供丰富的配置选项，例如超时、错误处理和请求拦截。
结论
通过正确配置 CORS 或使用替代方法，您可以解决 AJAX 跨域请求中的 "Origin null is not allowed by Access-Control-Allow-Origin" 错误。通过了解不同的解决办法，您可以找到最适合您特定需求的方法。
