CORS:跨域访问、如何在Nginx中配置允许跨域访问

千层冷面 2024-10-03 13:37:05 阅读 65

跨域访问(Cross-Origin Resource Sharing, CORS)是浏览器安全策略的一部分,用于控制不同源(origin)之间的资源共享。当一个网页尝试从不同的源(协议、域名或端口中的任何一个不同)加载资源时,就会触发跨域访问问题。以下是跨域访问的基本流程,通常不需要直接编程实现(除非是在服务器端配置CORS策略):

一、跨域访问流程:

请求发送:

浏览器向服务器发送一个请求(如GET、POST等),尝试访问一个跨域的资源。

预检请求(可选):

对于某些类型的跨域请求(如POST、PUT等),浏览器会首先发送一个OPTIONS请求到服务器,询问实际请求是否安全,即是否允许跨域。这称为“预检请求”。预检请求中通常包含Access-Control-Request-Method和Access-Control-Request-Headers头部,用于告诉服务器实际请求将使用的方法和头部信息。

服务器响应预检请求:

如果服务器支持跨域请求,它会在响应中设置Access-Control-Allow-Origin头部,可能还包括Access-Control-Allow-Methods和Access-Control-Allow-Headers等,以指示哪些来源、方法和头部是允许的。如果服务器不支持跨域请求,则不会设置这些CORS相关的头部,或者可能会返回错误状态码(如403 Forbidden)。

浏览器处理响应:

如果预检请求成功(即服务器返回了适当的CORS头部),浏览器会发送实际的请求。如果预检请求失败(如服务器未设置正确的CORS头部),浏览器会阻止实际请求的发送,并可能向控制台报告错误。

实际请求与响应:

浏览器发送实际请求到服务器。服务器处理请求,并返回响应。如果响应中包含了正确的CORS头部(Access-Control-Allow-Origin等),浏览器会将响 应数据暴露给前端JavaScript代码。如果响应中未包含正确的CORS头部,浏览器会隐藏响应数据,并可能向控制台报告错误。

二、Nginx配置允许跨域访问

Nginx配置如下,如果你的前端页面允许跨域访问,则需要在前端资源的<code>location块中配置

server {

listen 80;

server_name yourdomain.com;

location /api/ {

# 允许所有域跨域访问(不推荐,出于安全考虑应指定具体域名)

# add_header 'Access-Control-Allow-Origin' '*';

# 允许特定域跨域访问(推荐)

add_header 'Access-Control-Allow-Origin' 'https://your-front-end-domain.com';

# 允许的HTTP方法

add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';

# 允许的自定义请求

add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, X-Requested-With';

# 允许携带Cookie

add_header 'Access-Control-Allow-Credentials' 'true';

# 预检请求的有效期(可选)

add_header 'Access-Control-Max-Age' 1728000;

# 如果请求方法是OPTIONS,则直接返回204状态码,不执行后续操作

if ($request_method = 'OPTIONS') {

return 204;

}

# 其他配置...

}

}



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。