在现代Web开发中,跨域资源共享（CORS）是一个重要的安全特性，它允许来自不同域（不同IP地址和/或不同域名）的Web应用能够安全地共享资源，对于开发者来说，理解CORS如何工作以及如何在不同IP地址和域名之间实现跨域资源共享可能是一个挑战，本文将深入探讨CORS的工作原理，并解释不同IP地址和域名如何通过CORS实现跨域资源共享。
云服之家，国内最专业的云服务器虚拟主机域名商家信息平台
CORS基础
跨域资源共享（CORS）是一种机制，它使用额外的HTTP头来告诉浏览器允许来自其他域（即不同IP地址或不同域名）的网页访问资源，CORS策略由服务器设置，通过响应HTTP请求时添加特定的头信息来指示哪些域可以访问资源。
CORS工作流程
- 浏览器发起跨域请求：当浏览器发起一个跨域请求时，它首先会向服务器发送一个预检请求（OPTIONS请求），询问服务器是否允许跨域请求。
- 服务器响应预检请求：服务器接收到预检请求后，会检查请求的域名、IP地址、使用的HTTP方法以及请求头等信息，并决定是否允许跨域请求，如果允许，服务器会在响应中携带一些CORS相关的头信息，如
Access-Control-Allow-Origin。 - 浏览器根据服务器响应决定是否继续请求：浏览器接收到服务器的响应后，会根据其中的CORS头信息决定是否继续处理请求，如果
Access-Control-Allow-Origin头信息包含当前域的域名或（表示接受所有域的请求），则浏览器会继续处理请求；否则，会阻止请求并显示跨域错误。
不同IP地址的跨域请求
尽管不同IP地址通常意味着不同的网络位置,但CORS并不直接基于IP地址进行限制，CORS策略主要基于域名进行限制，而不是具体的IP地址，如果两个不同IP地址的域名相同（即它们属于同一个域），那么它们之间是可以进行跨域资源共享的，如果两个网站分别部署在192.168.1.1和192.168.1.2上，但它们的域名都是example.com，那么这两个网站之间可以通过CORS进行资源共享。
示例：不同IP地址相同域名
假设有两个网站分别部署在192.168.1.1和192.168.1.2上，它们的域名都是example.com，我们希望在第一个网站上通过AJAX请求第二个网站上的一个资源。
第一个网站（192.168.1.1）的HTML代码：
<!DOCTYPE html>
<html>
<head>Cross-Origin Request</title>
</head>
<body>
<script>
fetch('http://example.com/resource', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
</script>
</body>
</html>
第二个网站（192.168.1.2）的服务器响应：
HTTP/1.1 200 OK
Content-Type: application/json
Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With
Content-Length: 23
Connection: keep-alive
Date: Mon, 05 Oct 2020 15:55:30 GMT
Server: gunicorn/19.9.0
[{"id": 1, "name": "Resource"}]
在这个例子中,尽管两个网站位于不同的IP地址，但由于它们属于同一个域名example.com，因此可以通过CORS进行资源共享，服务器响应中的Access-Control-Allow-Origin头信息允许来自http://example.com的请求，第一个网站能够成功地从第二个网站获取资源。
不同域名的跨域请求
如果两个网站位于不同的IP地址且属于不同的域名（一个属于example.com，另一个属于test.com），那么它们之间的跨域请求将受到浏览器的限制，在这种情况下，除非服务器明确允许来自特定域的跨域请求（通过设置Access-Control-Allow-Origin头信息），否则浏览器会阻止这些请求并显示跨域错误。
第一个网站（属于example.com）的HTML代码：
<!DOCTYPE html>
<html>
<head>Cross-Origin Request</title>
</head>
<body>
<script>
fetch('http://test.com/resource', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
})
.then(response => response.json()) // 这里的代码将不会执行，因为浏览器会阻止跨域请求并显示错误，但为完整性保留在此，实际上应该捕获并处理错误。 .then(response => response.json()).catch(error => console.error('Error:', error)); } </script> </body> </html> 第一个网站（属于example.com）的HTML代码： `html<!DOCTYPE html> <html> <head> <title>Cross-Origin Request</title> </head> <body> <script> fetch('http://test.com/resource', { method: 'GET', headers: { 'Content-Type': 'application/json' } }).then(response => response.json()).catch(error => console.error('Error:', error)); // 注意捕获并处理错误 </script> </body> </html>` 第二个网站（属于test.com）的服务器响应： `http/1.1 403 Forbidden Access-Control-Allow-Origin: * Content-Length: 0 Connection: keep-alive Date: Mon, 05 Oct 2020 15:55:30 GMT Server: nginx` 在这个例子中，由于两个网站属于不同的域名（example.com和test.com），因此它们之间的跨域请求受到浏览器的限制，尽管第二个网站的服务器响应中包含了`Access-Control-Allow-Origin: *`头信息（表示接受所有域的请求），但由于第一个网站属于不同的域名，因此浏览器仍然会阻止该请求并显示跨域错误，然而需要注意的是这里存在安全隐患因为使用 `Access-Control-Allow-Origin: *` 允许所有域的请求可能会使网站面临安全风险因此通常不建议在生产环境中使用这种设置而是应该根据实际需求设置特定的允许域名例如 `Access-Control-Allow-Origin: http://trusteddomain.com` ，因此在实际应用中应该根据实际需求设置特定的允许域名以加强安全性例如 `Access-Control-Allow-Origin: http://trusteddomain.com` ，总结综上所述我们可以得出结论：不同IP地址本身并不影响CORS策略因为CORS主要基于域名进行限制而不是具体的IP地址但是不同域名之间的跨域请求会受到浏览器的限制除非服务器明确允许来自特定域的跨域请求否则这些请求将被浏览器阻止并显示错误消息因此在实际开发中应该根据实际需求设置合适的CORS策略以确保安全性和可用性之间的平衡同时也要注意避免使用过于宽松的CORS策略以防止潜在的安全风险例如不要使用 `Access-Control-Allow-Origin: *` 除非确实需要接受所有域的请求并且已经采取了其他安全措施来确保网站的安全性另外也要关注浏览器对CORS的支持情况以确保在不同浏览器上都能实现预期的跨域资源共享效果最后需要提醒的是本文所述内容仅适用于现代浏览器对于某些旧版浏览器可能存在不同的行为表现因此在开发过程中应该考虑兼容性测试以确保跨域资源共享的实现效果符合需求。